import type { ProductSummaryDto } from '@/lib/api';

export function ProductCard({ product }: Readonly<{ product: ProductSummaryDto }>) {
  const mainImage = product.images?.find((image) => image.role === 'main') ?? product.images?.[0];

  return (
    <a
      href={product.url}
      className="group block overflow-hidden rounded-3xl border border-emerald-900/10 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-emerald-700"
    >
      <div className="flex w-full max-h-72 items-center justify-center bg-emerald-50 text-sm text-emerald-900 overflow-hidden">
        {mainImage ? (
          // Keep plain img for remote/local URL compatibility until image pipeline configuration exists.
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={mainImage.url}
            alt={mainImage.altText}
            className="max-h-full max-w-full w-auto h-auto object-contain"
          />
        ) : (
          <span>Producto ecológico</span>
        )}
      </div>
      <div className="space-y-2 p-5">
        <h2 className="text-lg font-semibold text-emerald-950 group-hover:text-emerald-800">
          {product.name}
        </h2>
        <p className="line-clamp-3 text-sm leading-6 text-stone-600">
          {product.description ?? 'Producto activo del catálogo público.'}
        </p>
      </div>
    </a>
  );
}
