interface PriceData {
  subtotal: string;
  shipping: string;
  insurance: string;
  total: string;
}

interface Props {
  priceData: PriceData;
}

export default function PriceSummary({ priceData }: Props) {
  return (
    <div className="mt-6">
      <div className="space-y-3 border-t pt-4">
        <div className="flex justify-between text-gray-700">
          <span>Subtotal</span>
          <span>{priceData.subtotal}</span>
        </div>
        <div className="flex justify-between text-gray-700">
          <span>Shipping & Handling</span>
          <span>{priceData.shipping}</span>
        </div>
        <div className="flex justify-between text-gray-700">
          <span>Insurance (Insurance for Lost)</span>
          <span>{priceData.insurance}</span>
        </div>
      </div>

      {/* 底部总价栏，浅黄色背景 */}
      <div className="bg-amber-50 mt-4 py-3 px-2 rounded">
        <div className="flex justify-between items-center">
          <p className="text-lg font-bold">Grand Total</p>
          <p className="text-lg font-bold">{priceData.total}</p>
        </div>
      </div>
    </div>
  );
}