'use client';

import { Package } from 'lucide-react';

interface ProductWithCount {
  id: string;
  name: string;
  description: string;
  createdAt: string | Date;
  _count?: { requirements: number; projects: number };
}

interface Props {
  product: ProductWithCount;
  onClick: (id: string) => void;
}

export function ProductCard({ product, onClick }: Props) {
  const reqCount = product._count?.requirements ?? 0;
  const projCount = product._count?.projects ?? 0;

  return (
    <div
      onClick={() => onClick(product.id)}
      className="group cursor-pointer rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-5 transition-all hover:border-[var(--ink-muted)] hover:shadow-[var(--shadow-md)]"
    >
      <div className="mb-4 flex items-start gap-3">
        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--accent-soft)]">
          <Package className="h-[18px] w-[18px] text-[var(--accent-hover)]" strokeWidth={1.75} />
        </div>
        <div className="min-w-0 flex-1">
          <h3 className="truncate text-[14px] font-semibold text-[var(--ink)]">{product.name}</h3>
          <p className="mt-1 line-clamp-2 text-[12.5px] leading-relaxed text-[var(--ink-muted)]">
            {product.description || '暂无描述'}
          </p>
        </div>
      </div>

      <div className="flex items-center gap-4 border-t border-[var(--line-soft)] pt-3">
        <div className="flex items-baseline gap-1">
          <span className="text-[13px] font-semibold tabular-nums text-[var(--ink)]">{reqCount}</span>
          <span className="text-[11px] text-[var(--ink-muted)]">需求</span>
        </div>
        <div className="h-3 w-px bg-[var(--line)]" />
        <div className="flex items-baseline gap-1">
          <span className="text-[13px] font-semibold tabular-nums text-[var(--ink)]">{projCount}</span>
          <span className="text-[11px] text-[var(--ink-muted)]">项目</span>
        </div>
      </div>
    </div>
  );
}