ftb-project-management/apps/web/components/product/ProductCard.tsx

'use client';

import { Product } from '@ftb/shared';

interface ProductWithCount extends Product {
  _count?: { requirements: number; projects: number };
}

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

export function ProductCard({ product, onClick }: Props) {
  return (
    <div
      className="cursor-pointer rounded-lg border border-gray-200 p-5 transition-shadow hover:shadow-md"
      onClick={() => onClick(product.id)}
    >
      <h3 className="text-lg font-semibold text-gray-900">{product.name}</h3>
      {product.description && (
        <p className="mt-1 text-sm text-gray-500 line-clamp-2">{product.description}</p>
      )}
      <div className="mt-4 flex gap-4 text-xs text-gray-400">
        <span>{product._count?.requirements ?? 0} 需求</span>
        <span>{product._count?.projects ?? 0} 项目</span>
      </div>
    </div>
  );
}