"use client";
import Image from "next/image";
import Link from "next/link";

import { FabricCatData } from "./data/fabricNavData";
import { useEffect, useState } from "react";
import { AWS_CDN_URL } from "@/utils/staticValues";


export default function FabricItems() {

  interface FabricFamily {
    id: number;
    name: string;
    image: string;
    alt_text?: string;
    slug: string;
    thumbnail_image: string;
  }

  const [fabricFamilyList, setFabricFamilyList] = useState<FabricFamily[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  
  // Fetch fabric families from cached API route
  useEffect(() => {
    async function getFabricFamilies() {
      try {
        setIsLoading(true);
        // Use cached API route instead of direct external API call
        const response = await fetch(
          '/api/fabrics/families',
          {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
            },
            cache: 'force-cache',
            next: { revalidate: 900 }, // 15 minutes
          },
        );

        if (!response.ok) {
          throw new Error(`Error: ${response.status} - ${response.statusText}`);
        }

        const result = await response.json();
        setFabricFamilyList(result.data?.fabric || []);
      } catch (error) {
        console.error("Error fetching fabric families:", error);
      } finally {
        setIsLoading(false);
      }
    }

    getFabricFamilies();
  }, []);
      
  return (
    <div className="mt-8 grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-20">
      {isLoading ? (
        <div className="col-span-2 md:col-span-3 flex items-center justify-center py-20">
          <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-gray-900"></div>
        </div>
      ) : fabricFamilyList.length > 0 ? (
        fabricFamilyList.map((item, index) => (
        <Link
          href={`/fabric/${item.slug}`}
          key={`${item.id}_${index}`}
          className="flex flex-col gap-2 md:gap-5 hover:border-gray-950 hover:scale-110 transition-all duration-300"
        >
          <div className="border-1">
            <Image
              src={`${AWS_CDN_URL}/${item.thumbnail_image}`}
              alt={item.alt_text || item.name}
              width={256}
              height={256}
              className="img-responsive"
            />
          </div>
          <div className="font-bogart font-medium md:text-2xl/4 capitalize pb-4">
            {item.name}
          </div>
        </Link>
      ))
      ) : (
        <div className="col-span-2 md:col-span-3 flex flex-col items-center justify-center py-20">
          <p className="text-gray-500">No fabric families available</p>
        </div>
      )}
    </div>
  );
}