import { cn } from "@/app/lib/cn";
import bannersImage from "@/assets/images/best-sellers/banners.jpg";
import boxesImage from "@/assets/images/best-sellers/boxes.jpg";
import businessCardsImage from "@/assets/images/best-sellers/business-cards.jpg";
import calendarsImage from "@/assets/images/best-sellers/calendars.jpg";
import catalogsImage from "@/assets/images/best-sellers/catalogs.png";
import { ArrowLeft } from "iconsax-reactjs";
import Image, { type StaticImageData } from "next/image";
import { type FC } from "react";

type CategoryItem = {
  title: string;
  image: StaticImageData;
  featured?: boolean;
};

const categories: CategoryItem[] = [
  { title: "جعبه ها", image: boxesImage, featured: true },
  { title: "کاتالوگ ها", image: catalogsImage },
  { title: "کارت ویزیت", image: businessCardsImage },
  { title: "تقویم ها", image: calendarsImage },
  { title: "بنرها", image: bannersImage },
];

type CategoryTileProps = {
  title: string;
  image: StaticImageData;
  featured?: boolean;
};

const CategoryTile: FC<CategoryTileProps> = ({ title, image, featured }) => {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-[40px]",
        featured ? "col-span-2 row-span-2" : "aspect-square",
      )}
    >
      <Image src={image} alt={title} fill className="object-cover" sizes={featured ? "50vw" : "25vw"} />
      <div
        className={cn(
          "absolute inset-x-4 bottom-4 flex items-center justify-between rounded-3xl bg-[#0A1B2C]/60 backdrop-blur-[2px]",
          featured ? "px-6 py-3.5" : "px-5 py-3",
        )}
      >
        <div className={cn("text-white font-bold", featured ? "text-lg" : "text-base")}>{title}</div>
        <div className="flex items-center gap-1.5 text-white">
          <span className={cn("font-bold", featured ? "text-sm" : "text-xs")}>مشاهده</span>
          <ArrowLeft size={featured ? 20 : 18} color="currentColor" />
        </div>
      </div>
    </div>
  );
};

const BestSellerCategories: FC = () => {
  return (
    <div className="mt-[120px] px-[120px]">
      <div className="font-bold text-2xl">دسته بندی های پرفروش</div>

      <div className="mt-12 grid grid-cols-4 gap-10">
        {categories.map((category) => (
          <CategoryTile key={category.title} title={category.title} image={category.image} featured={category.featured} />
        ))}
      </div>
    </div>
  );
};

export default BestSellerCategories;
