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-[24px] sm:rounded-[40px]",
        featured ? "col-span-2 row-span-2 min-h-[220px] sm:min-h-0" : "aspect-square",
      )}
    >
      <Image src={image} alt={title} fill className="object-cover" sizes={featured ? "(max-width: 768px) 100vw, 50vw" : "(max-width: 768px) 50vw, 25vw"} />
      <div
        className={cn(
          "absolute inset-x-3 bottom-3 sm:inset-x-4 sm:bottom-4 flex items-center justify-between rounded-2xl sm:rounded-3xl bg-[#0A1B2C]/60 backdrop-blur-[2px]",
          featured ? "px-4 py-3 sm:px-6 sm:py-3.5" : "px-3 py-2.5 sm:px-5 sm:py-3",
        )}
      >
        <div className={cn("text-white font-bold", featured ? "text-base sm:text-lg" : "text-sm sm:text-base")}>{title}</div>
        <div className="flex items-center gap-1.5 text-white">
          <span className={cn("font-bold", featured ? "text-xs sm:text-sm" : "text-xs")}>مشاهده</span>
          <ArrowLeft size={featured ? 20 : 18} color="currentColor" />
        </div>
      </div>
    </div>
  );
};

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

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

export default BestSellerCategories;