import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { formatCurrency } from "@/lib/utils"

interface ContractItem {
  materialNo?: string
  itemDescription?: string
  specification?: string
  quantity?: number
  quantityUnit?: string
  unitPrice?: number | string
  contractAmount?: number | string
}

interface ContractItemsCardProps {
  items: ContractItem[]
  currency?: string
}

export function ContractItemsCard({ items, currency = "KRW" }: ContractItemsCardProps) {
  if (!items || items.length === 0) {
    return null
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">계약 품목</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="border-b bg-muted/50">
              <tr>
                <th className="px-4 py-3 text-left font-medium">자재번호</th>
                <th className="px-4 py-3 text-left font-medium">품목/자재내역</th>
                <th className="px-4 py-3 text-left font-medium">규격</th>
                <th className="px-4 py-3 text-right font-medium">수량</th>
                <th className="px-4 py-3 text-right font-medium">단가</th>
                <th className="px-4 py-3 text-right font-medium">금액</th>
              </tr>
            </thead>
            <tbody>
              {items.map((item, idx) => (
                <tr key={idx} className="border-b last:border-0">
                  <td className="px-4 py-3">{item.materialNo || "-"}</td>
                  <td className="px-4 py-3">{item.itemDescription || "-"}</td>
                  <td className="px-4 py-3">{item.specification || "-"}</td>
                  <td className="px-4 py-3 text-right">
                    {item.quantity} {item.quantityUnit || ""}
                  </td>
                  <td className="px-4 py-3 text-right font-mono">
                    {item.unitPrice
                      ? formatCurrency(
                          parseFloat(item.unitPrice.toString()),
                          currency
                        )
                      : "-"}
                  </td>
                  <td className="px-4 py-3 text-right font-mono font-medium">
                    {item.contractAmount
                      ? formatCurrency(
                          parseFloat(item.contractAmount.toString()),
                          currency
                        )
                      : "-"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </CardContent>
    </Card>
  )
}