/** 产品信息卡片 */
import { Package } from "lucide-react";
import type { ProductScanResponse } from "../../types/api";

const STATUS_LABELS: Record<string, string> = {
  pending: "待处理",
  in_progress: "进行中",
  completed: "已完成",
  cancelled: "已取消",
};

function statusColor(status: string): string {
  switch (status) {
    case "pending":   return "bg-yellow-100 text-yellow-700";
    case "in_progress": return "bg-blue-100 text-blue-700";
    case "completed":  return "bg-green-100 text-green-700";
    default:           return "bg-gray-100 text-gray-600";
  }
}

interface ProductCardProps {
  product: ProductScanResponse;
}

export default function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="rounded-xl bg-white p-4 shadow-sm">
      <div className="mb-3 flex items-center gap-2">
        <Package className="h-5 w-5 text-blue-600" />
        <h3 className="font-semibold text-gray-800">产品信息</h3>
        <span className={`ml-auto rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor(product.status)}`}>
          {STATUS_LABELS[product.status] ?? product.status}
        </span>
      </div>
      <div className="grid grid-cols-2 gap-2 text-sm">
        <div>
          <span className="text-gray-400">序列号</span>
          <p className="font-mono font-medium text-gray-800">{product.serial_number}</p>
        </div>
        <div>
          <span className="text-gray-400">订单编号</span>
          <p className="font-medium text-gray-800">{product.order_no}</p>
        </div>
        {product.material_id && (
          <div>
            <span className="text-gray-400">物料 ID</span>
            <p className="font-medium text-gray-800">{product.material_id}</p>
          </div>
        )}
      </div>
    </div>
  );
}