"use client";

import { useState, useEffect } from "react";
import { getPublicClients, PublicClient } from "@/service/client/public-clients";

type CategoryTabsProps = {
  selectedCategory: string;
  onCategoryChange: (category: string) => void;
};

export default function CategoryTabs({
  selectedCategory,
  onCategoryChange,
}: CategoryTabsProps) {
  const [clients, setClients] = useState<PublicClient[]>([]);
  const [loading, setLoading] = useState(true);

  // Fetch public clients
  useEffect(() => {
    async function fetchClients() {
      try {
        const response = await getPublicClients();
        if (response?.data?.success && response.data.data) {
          setClients(response.data.data);
        }
      } catch (error) {
        console.error("Error fetching public clients:", error);
        // Fallback to empty array if API fails
        setClients([]);
      } finally {
        setLoading(false);
      }
    }

    fetchClients();
  }, []);

  // Create categories array with "SEMUA" first, then client names
  const categories = ["SEMUA", ...clients.map(client => client.name)];

  if (loading) {
    return (
      <div className="flex flex-wrap gap-2 overflow-x-auto">
        {Array.from({ length: 6 }).map((_, idx) => (
          <div
            key={idx}
            className="px-4 py-1 text-sm rounded font-medium border bg-gray-200 animate-pulse h-8 w-20"
          ></div>
        ))}
      </div>
    );
  }

  return (
    <div className="flex flex-wrap gap-2 overflow-x-auto">
      {categories.map((cat, idx) => (
        <button
          key={idx}
          onClick={() => onCategoryChange(cat)}
          className={`px-4 py-1 text-sm rounded font-medium border transition-colors ${
            selectedCategory === cat
              ? "bg-[#C6A455] text-white"
              : "bg-white text-gray-800 hover:bg-gray-50"
          }`}
        >
          {cat.toUpperCase()}
        </button>
      ))}
    </div>
  );
}