/**
 * @component BrandsCarousel
 * @purpose Brand showcase list loaded from `catalogService.getBrands()` filtering products by brand.
 * @dependencies catalogService
 */
'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { catalogService, BrandResponse } from '@/services/api/catalogService';

export function BrandsCarousel() {
  const [brands, setBrands] = useState<BrandResponse[]>([]);

  useEffect(() => {
    catalogService.getBrands().then(setBrands);
  }, []);

  return (
    <section className="w-full max-w-7xl mx-auto px-4 py-8">
      <div className="text-center mb-6">
        <span className="text-[10px] font-bold text-[#e4382f] uppercase tracking-wider">
          Authorized Partners
        </span>
        <h2 className="text-xl font-extrabold text-[#1b2559]">Official Tech Brands</h2>
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
        {brands.map((brand) => (
          <Link
            key={brand.brand_id}
            href={`/products?brand=${brand.slug}`}
            className="group bg-white border border-gray-200 rounded-xl p-4 flex items-center justify-center shadow-xs hover:border-[#e4382f] hover:shadow-md transition-all h-20"
          >
            <span className="text-sm font-extrabold text-gray-700 group-hover:text-[#e4382f] transition-colors tracking-wide">
              {brand.name}
            </span>
          </Link>
        ))}
      </div>
    </section>
  );
}