'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { ArrowRight, Folder } from 'lucide-react';
import { catalogService, CategoryResponse } from '@/services/api/catalogService';

export function CategoryGrid() {
  const [categories, setCategories] = useState<CategoryResponse[]>([]);

  useEffect(() => {
    catalogService.getCategories().then((res) => {
      if (Array.isArray(res)) setCategories(res.slice(0, 6));
    });
  }, []);

  if (categories.length === 0) return null;

  return (
    <section className="w-full max-w-7xl mx-auto px-4 py-8">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-xl font-bold text-gray-900">Shop By Categories</h2>
        <Link
          href="/shop"
          className="text-xs font-semibold text-gray-700 hover:text-[#1877f2] flex items-center gap-1 transition-colors"
        >
          <span>View All</span>
          <ArrowRight className="w-3.5 h-3.5" />
        </Link>
      </div>

      {/* Category Cards Grid */}
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
        {categories.map((cat) => (
          <Link
            key={cat.category_id}
            href={`/shop?category=${encodeURIComponent(cat.slug)}`}
            className="group bg-[#f5f6f8] rounded-xl p-4 flex flex-col items-center text-center hover:shadow-md transition-all border border-gray-100"
          >
            <div className="relative w-24 h-24 mb-3 flex items-center justify-center bg-white rounded-lg p-2">
              {cat.image_url ? (
                <Image
                  src={cat.image_url}
                  alt={cat.name}
                  fill
                  className="object-contain group-hover:scale-105 transition-transform duration-200"
                />
              ) : (
                <Folder className="w-10 h-10 text-[#1877f2]/60 group-hover:scale-110 transition-transform" />
              )}
            </div>
            <h3 className="text-xs font-bold text-gray-900 group-hover:text-[#1877f2] transition-colors line-clamp-1">
              {cat.name}
            </h3>
            <span className="text-[10px] text-gray-400 font-medium mt-0.5">
              {cat.product_count ? `${cat.product_count} Products` : 'Explore Category'}
            </span>
          </Link>
        ))}
      </div>
    </section>
  );
}