import Image from "next/image";

import SectionHeader from "@/components/layout/SectionHeader";
import ProductCard, { type ProductCardProps } from "@/components/ui/ProductCard";
import { cn } from "@/lib/utils";

interface FeatureProductsProps {
  title?: string;
  description?: string;
  products?: ProductCardProps[];
  imageSrc?: string;
  imageAlt?: string;
  imageSide?: "left" | "right";
  headerAlign?: "left" | "center";
  productsPosition?: "top" | "bottom";
  className?: string;
}

const defaultProducts: ProductCardProps[] = [
  {
    imageSrc: "/images/tote-gallery-1.png",
    imageAlt: "Espresso brown tote bag",
    discountBadge: "-42%",
    showWishlist: true,
    name: "Calla Tote Bag - Espresso Brown",
    rating: 4.9,
    soldCount: "128 Sold",
    price: "LKR 5,000.00",
    oldPrice: "LKR 5,600.00",
    showAddToCart: true,
  },
  {
    imageSrc: "/images/tote-gallery-2.png",
    imageAlt: "Fashion sandals",
    showWishlist: true,
    name: "Calla Tote Bag - Espresso Brown",
    rating: 4.9,
    soldCount: "128 Sold",
    price: "LKR 5,000.00",
    oldPrice: "LKR 5,600.00",
    showAddToCart: true,
  },
  {
    imageSrc: "/images/tote-gallery-3.png",
    imageAlt: "Tan sandals",
    showWishlist: true,
    name: "Calla Tote Bag - Espresso Brown",
    rating: 4.9,
    soldCount: "128 Sold",
    price: "LKR 5,000.00",
    oldPrice: "LKR 5,600.00",
    showAddToCart: true,
  },
  {
    imageSrc: "/images/tote-gallery-4.png",
    imageAlt: "Black handbag",
    discountBadge: "-40%",
    showWishlist: true,
    name: "Calla Tote Bag - Espresso Brown",
    rating: 4.9,
    soldCount: "128 Sold",
    price: "LKR 5,000.00",
    oldPrice: "LKR 5,600.00",
    showAddToCart: true,
  },
];

export default function FeatureProducts({
  title = "Most Popular",
  description = "Loved by customers, chosen again and again",
  products = defaultProducts,
  imageSrc = "/images/feature-fashion-side.png",
  imageAlt = "Featured fashion editorial",
  imageSide = "right",
  headerAlign = "center",
  productsPosition = "bottom",
  className,
}: FeatureProductsProps) {
  const hasHeader = Boolean(title || description);
  const hasProducts = products.length > 0;
  const hasImage = Boolean(imageSrc);

  const productContent = (
    <div
      className={cn(
        "flex min-h-full flex-col gap-8 bg-white px-4 py-8 sm:px-8 lg:px-10",
        productsPosition === "bottom" ? "justify-center" : "justify-start"
      )}
    >
      {hasHeader && (
        <div className={cn(headerAlign === "center" ? "text-center" : "text-left")}>
          <SectionHeader title={title} details={description} />
        </div>
      )}

      {hasProducts && (
        <div className="grid grid-cols-1 gap-5 min-[480px]:grid-cols-2">
          {products.map((product, index) => (
            <ProductCard
              key={`${product.name ?? "product"}-${index}`}
              {...product}
              className={cn("max-w-none rounded-lg shadow-none", product.className)}
            />
          ))}
        </div>
      )}
    </div>
  );

  const imageContent = hasImage ? (
    <div className="relative min-h-[360px] overflow-hidden bg-gray-100 lg:min-h-[720px]">
      <Image
        src={imageSrc}
        alt={imageAlt}
        fill
        sizes="(max-width: 1024px) 100vw, 50vw"
        className="object-cover"
      />
    </div>
  ) : null;

  return (
    <section className={cn("grid w-full overflow-hidden rounded-lg bg-white lg:grid-cols-2", className)}>
      {imageSide === "left" && imageContent}
      {productContent}
      {imageSide === "right" && imageContent}
    </section>
  );
}
