'use client';
import Link from 'next/link';
import { useStoreContext } from '@/components/store/StoreThemeProvider';
import { formatCurrency } from '@/utils/formatCurrency';
import type { Product } from '@/types';

export function ProductCard({ product }: { product: Product }) {
  const { store } = useStoreContext();
  const outOfStock = product.trackStock && product.stock === 0;
  const price = product.promoPrice ?? product.price;

  return (
    <Link
      href={`/loja/${store.slug}/produto/${product.slug}`}
      className="group flex flex-col overflow-hidden rounded-xl border border-ink-100 bg-white transition-shadow hover:shadow-card"
    >
      <div className="relative aspect-square overflow-hidden bg-ink-50">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={product.images[0]}
          alt={product.name}
          className={`h-full w-full object-cover transition-transform group-hover:scale-105 ${outOfStock ? 'opacity-50 grayscale' : ''}`}
        />
        {product.promoPrice && !outOfStock && (
          <span className="absolute left-2 top-2 rounded-full px-2 py-0.5 text-xs font-semibold text-white" style={{ background: 'var(--store-primary)' }}>
            Promoção
          </span>
        )}
        {outOfStock && (
          <span className="absolute inset-0 flex items-center justify-center bg-white/60 text-sm font-semibold text-ink-700">
            Esgotado
          </span>
        )}
      </div>
      <div className="flex flex-1 flex-col p-3">
        <p className="line-clamp-2 text-sm font-medium text-ink-900">{product.name}</p>
        <div className="mt-auto pt-2">
          {product.promoPrice ? (
            <div className="flex items-baseline gap-1.5">
              <span className="text-base font-semibold" style={{ color: 'var(--store-secondary)' }}>{formatCurrency(product.promoPrice)}</span>
              <span className="text-xs text-ink-400 line-through">{formatCurrency(product.price)}</span>
            </div>
          ) : (
            <span className="text-base font-semibold" style={{ color: 'var(--store-secondary)' }}>{formatCurrency(price)}</span>
          )}
        </div>
      </div>
    </Link>
  );
}