import Link from "next/link";
import { FC } from "react";
import Grid from "@/components/theme/ui/grid/Grid";
import { NextImage } from "@/components/common/NextImage";
import { Price } from "@/components/theme/ui/Price";
import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";

type ProductCardProps = {
  currency: string;
  price: string;
  specialPrice?: string;
  imageUrl: string;
  product: {
    urlKey: string;
    name: string;
    id: string;
    type: string;
    isSaleable?: string;
  };
  sizes?: string; 
  priority?: boolean;
};

export const ProductCard: FC<ProductCardProps> = ({
  currency,
  price,
  specialPrice,
  imageUrl,
  product,
  sizes = "(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw",
  priority = false
}) => {
  return (
    <Grid.Item
      key={product.id}
      className="animate-fadeIn gap-y-4.5 flex flex-col"
    >
      <div className="group relative overflow-hidden rounded-lg">
        <Link href={`/${product.urlKey}.html`} aria-label={`View ${product.name}`}>
          <div className="aspect-[353/283] h-auto truncate rounded-lg">
            <NextImage
              alt={product?.name || "Product image"}
              src={imageUrl}
              width={353}
              height={283}
              sizes={sizes}
              className={`rounded-lg bg-neutral-100 object-cover transition duration-300 ease-in-out group-hover:scale-105`}
              priority={priority}
            />
          </div>
        </Link>

        
      </div>

      <div>
        <h3 className="mb-2.5 text-sm font-medium md:text-lg">
          {product?.name}
        </h3>

        <div className="flex items-center gap-2">
          {product?.type === "configurable" && (
            <span className="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
              As low as
            </span>
          )}
          {product?.type === "simple" && specialPrice ? (
            <>
              <div className="flex items-center gap-2">
                <Price
                  amount={specialPrice}
                  className="text-xs font-semibold md:text-sm"
                  currencyCode={currency}
                />
              </div>
            </>
          ) : (
            <Price
              amount={price}
              className="text-xs font-semibold md:text-sm"
              currencyCode={currency}
            />
          )}
          <OpenAddToCartModalButton productUrlKey={product.urlKey} />

        </div>
      </div>
    </Grid.Item>
  );
};
