import { Banner } from "@/components/homepage/Banner";
import { CategoryTabs } from "@/components/showcase/CategoryTabs";
import { Chip } from "@/components/showcase/Chip";
import { ChipSharp } from "@/components/showcase/ChipSharp";
import { ProductRecommendationCarousel } from "@/components/showcase/ProductRecommendationCarousel";
import { Separator } from "@/components/ui/separator";

interface CategoryDetailProps {
  title: string;
  chips: { image: string; text: string }[];
}

export const CategoryDesign1: React.FC<CategoryDetailProps> = ({
  title,
  chips,
}) => {
  return (
    <div className="mx-auto max-w-screen-xl mt-4">
      <div className="w-xl h-auto">
        <div>
          <Banner />

          <Separator className="my-8" />
          <h1 className="text-pretty m-4 my-8 md:text-3xl">{title}</h1>
          <div className="grid grid-cols-4 gap-4">
            {chips.map((chip, index) => (
              <ChipSharp key={index} image={chip.image} text={chip.text} />
            ))}
          </div>
          <Separator className="my-8" />

          <ProductRecommendationCarousel />

          <Separator className="my-8" />

          <div className="flex flex-wrap items-center justify-center gap-8">
            {chips.map((chip, index) => (
              <Chip key={index} image={chip.image} text={chip.text} />
            ))}
          </div>
          <Separator className="my-8" />
          <div>
            <CategoryTabs />
          </div>
          <Separator className="my-8" />
          <div className="mb-8">
            <ProductRecommendationCarousel />
            <ProductRecommendationCarousel />
          </div>
        </div>
      </div>
    </div>
  );
};