import Link from 'next/link';
import type { Product } from '@/lib/types';
import { resolveUploadUrl } from '@/lib/utils';

export function ProductCard({ product }: { product: Product }) {
  return (
    <Link
      href={`/products/${product.id}`}
      className="group block overflow-hidden rounded-xl border border-slate-200/70 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.04)] transition-all duration-300 hover:-translate-y-1 hover:border-brand-200 hover:shadow-[0_12px_32px_-12px_rgba(79,70,229,0.25)]"
    >
      <div className="aspect-[4/3] overflow-hidden bg-slate-100">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={resolveUploadUrl(product.cover)}
          alt={product.name}
          className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div className="p-4">
        <h3 className="text-base font-semibold text-slate-900 transition-colors group-hover:text-brand-600">
          {product.name}
        </h3>
        {product.desc && (
          <p className="mt-1 line-clamp-2 text-sm text-slate-500">
            {product.desc}
          </p>
        )}
        {product.category?.name && (
          <span className="mt-3 inline-block rounded bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand-600">
            {product.category.name}
          </span>
        )}
      </div>
    </Link>
  );
}