import Image from 'next/image';
import Link from './site-link';
import { PortalIcon, type PortalIconName } from './portal-icon';
import { CatalogAddButton } from './catalog-add-button';
import { getRealCategory, productPath, type PublicProduct } from '../lib/real-catalog.server';
import { whatsappUrl } from '../lib/whatsapp';

export function productQuote(product: PublicProduct) {
  return whatsappUrl(`Olá, Portal! Quero cotar o produto ${product.code}: ${product.name}${product.brand ? `, marca ${product.brand}` : ''}. Podem confirmar disponibilidade e condições?`);
}
export function RealProductCard({ product, priority = false }: { product: PublicProduct; priority?: boolean }) {
  const category = getRealCategory(product.category);
  return <article className="rc-card" data-product-code={product.code}>
    <Link className="rc-card__image" href={productPath(product)} aria-label={`Ver ${product.name}`}>
      {product.image ? <Image src={product.image} alt={product.name} width={640} height={640} sizes="(max-width: 600px) 45vw, (max-width: 1100px) 30vw, 22vw" loading={priority ? 'eager' : 'lazy'} /> : <span className="rc-image-empty"><PortalIcon name={(category?.icon || 'list') as PortalIconName} /><small>Foto não disponível</small></span>}
    </Link>
    <div className="rc-card__body"><p className="rc-brand">{product.brand || 'Marca sob consulta'}</p><h3><Link href={productPath(product)}>{product.name}</Link></h3><p className="rc-reference">Cód. {product.code} <span>· {product.unit === 'a confirmar' ? 'Unidade a confirmar' : product.unit}</span></p><p className="rc-card__group">{product.group}</p></div>
    <div className="rc-card__actions"><a href={productQuote(product)} data-cta={`catalogo_produto_${product.code}`} target="_blank" rel="noopener noreferrer"><PortalIcon name="chat" /> Cotar este produto</a><CatalogAddButton product={{id:`erp-${product.code}`,name:`${product.name} · Cód. ${product.code}`,category:product.category,unit:product.unit}} /><Link href={productPath(product)}>Ver produto <span aria-hidden="true">↗</span></Link></div>
  </article>;
}