import Image from "next/image";
import Link from "next/link";

interface ProductCardProps {
  title: string;
  image: string;
  alt: string;
  href: string;
  salePrice: number;
  originalPrice: number;
  tag?: string;
}

export default function ProductCard({
  title,
  image,
  alt,
  href,
  salePrice,
  originalPrice,
  tag,
}: ProductCardProps) {
  return (
    <article className="product-card">
      <div className="thumb-wrap">
        {tag && <div className="tag">{tag}</div>}
        <Link className="product-thumb" href={href}>
          <Image
            src={image}
            alt={alt}
            className="photo-fit"
            loading="lazy"
            width={800}
            height={800}
            quality={92}
          />
        </Link>
      </div>
      <h4>{title}</h4>
      <div className="price price-discounted" data-base-aed={salePrice}>
        <span className="sale-price-pair">
          <span className="dirham-price sale-current">
            <img className="dirham-icon" src="/assets/dirham-symbol.svg" alt="" />
            <span className="dirham-value">{salePrice}</span>
          </span>
          <span className="dirham-price sale-original">
            <img className="dirham-icon" src="/assets/dirham-symbol.svg" alt="" />
            <span className="dirham-value">{originalPrice}</span>
          </span>
        </span>
      </div>
      <div className="meta">Earliest Delivery : Today</div>
      <button
        className="quick-add"
        type="button"
        data-addon-open
        data-product-title={title}
      >
        Add to cart
      </button>
    </article>
  );
}