"use client"
import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/shared/ui/accordion";
import {Link} from "@/shared/config/i18n/navigation";
import { useTranslations } from "next-intl";


interface Category {
  id: number;
  name: string;
  image: string;
  parent_id: number | null;
  parents: Category[];
}

interface CategoriesProps {
  categories: Category[];
}

const CategoriesSection: React.FC<CategoriesProps> = ({categories}) => {
  const t = useTranslations("")
  const renderCategory = (category: Category, level: number = 0) => {
    const itemValue = `category-${category.id}`;
    const hasChildren = category.parents && category.parents.length > 0;
    const hasImage =
      level === 0 && category.image && !category.image.includes("no_brend.png")
        ? category.image
        : null;

    return (
      <AccordionItem
        key={category.id}
        value={itemValue}
        className={`border-b ${level === 0 ? "border-gray-200" : "border-gray-100"}`}
      >
        <AccordionTrigger
            showArrowIcon={hasChildren}
          className={`flex items-center  gap-4 p-4 hover:bg-gray-50 transition-colors ${
            level === 0 ? "text-lg font-semibold" : "text-base font-medium"
          }`}
        >
          <div className={"flex items-center justify-center gap-10"}>
            {hasImage && (
              <img
                src={category.image}
                alt={category.name}
                className="w-12 h-12 object-cover rounded-md"
              />
            )}
            {hasChildren ? (
              <span>{category.name}</span>
            ) : (
              <Link href={`/category/${category.id}`}>
                {category.name}
              </Link>
            )}
          </div>
        </AccordionTrigger>
        {hasChildren && (
          <AccordionContent className="pl-6">
            <Accordion type="multiple" className="w-full">
              {category.parents.map((child) => renderCategory(child, level + 1))}
            </Accordion>
          </AccordionContent>
        )}
      </AccordionItem>
    );
  };
  return (
      <div className="my-container section-wrapper mx-auto p-4">
        <h1 className="section-title text-center">{t("Kategoriyalar")}</h1>
        <Accordion
            type="multiple"
            className="w-full rounded-lg grid space-y-10"
        >
          {categories.map((category) => renderCategory(category))}
        </Accordion>
      </div>
  );
};

export default CategoriesSection;