import Image from "next/image";
import { ArrowUpRight } from "lucide-react";
import { formatPrice, type CategoryProduct } from "@/data/category-showcases";

export function CategoryProductTile({ product, categoryTitle, viewMore = false, onClick }: { product: CategoryProduct; categoryTitle: string; viewMore?: boolean; onClick: () => void }) {
  return (
    <button type="button" className={`category-product-tile ${viewMore ? "category-view-more" : ""}`} onClick={onClick} aria-label={viewMore ? `View more ${categoryTitle}` : `${product.name}, ${formatPrice(product.price)}`}>
      <Image src={product.image} alt={product.name} fill sizes="(max-width: 600px) 44vw, (max-width: 1050px) 22vw, 15vw" className="category-product-image" />
      {viewMore && <span className="view-more-overlay"><span>View<br />more</span><ArrowUpRight size={18} /></span>}
      <span className="category-price">{formatPrice(product.price)}</span>
    </button>
  );
}