import Image, { StaticImageData } from "next/image";


type OrderItemProps = {
  image: string | StaticImageData;
  productName: string;
  lerCode: string;
  quantity: string;
  frequency: string;
  location: string;
  price: string;
  priceUnit?: string;
};

type OrderSummaryProps = {
  items: OrderItemProps[];
  subtotal: string;
  vat: string;
  vatPercent?: string;
  shipping?: string;
  total: string;
};

const OrderItem = ({
  image,
  productName,
  lerCode,
  quantity,
  frequency,
  location,
  price,
  priceUnit = "per month",
}: OrderItemProps) => {
  return (
    <div className="py-5 border-b border-[#000000]/10 last:border-b-0">
      <div className="flex items-start gap-3">
        <div className="relative h-[90px] w-[90px] md:h-[152px] md:w-[152px] shrink-0 overflow-hidden rounded-[12px]">
          <Image
            src={image}
            alt={productName}
            fill
            className="object-cover"
          />
        </div>
        <div className="flex flex-1 flex-col md:flex-row md:items-start md:justify-between gap-2 md:gap-4 min-w-0">
          <div className="min-w-0">
            <span className="font-outfit text-[16px] md:text-[18px] font-normal text-[#000000] mb-[5px] block">
              {productName}
            </span>
            <div className="flex flex-col space-y-[4px] mt-[5px]">
              <p className="font-outfit text-[14px] md:text-[16px] text-[#757575] font-light">
                <span className="font-light text-[#000000]">LER Code : </span>
                {lerCode}
              </p>
              <p className="font-outfit text-[14px] md:text-[16px] text-[#757575] font-light">
                <span className="font-light text-[#000000]">Quantity : </span>
                {quantity}
              </p>
              <p className="font-outfit text-[14px] md:text-[16px] text-[#757575] font-light">
                <span className="font-light text-[#000000]">Frequency : </span>
                {frequency}
              </p>
              <p className="font-outfit text-[14px] md:text-[16px] text-[#757575] font-light">
                <span className="font-light text-[#000000]">Location : </span>
                {location}
              </p>
            </div>
          </div>

          <div className="flex items-baseline shrink-0 md:text-right mt-1">
            <p className="font-outfit text-[18px] md:text-[22px] font-semibold">{price}</p>
            <span className="font-outfit text-[14px] md:text-[16px] font-light">/{priceUnit}</span>
          </div>
        </div>
      </div>
    </div>
  );
};


export default function OrderSummary({
  items,
  subtotal,
  vat,
  vatPercent = "21%",
  shipping,
  total,
}: OrderSummaryProps) {
  return (
    <section className="bg-[#F7FAF8] rounded-[20px] border border-[#DAE6DC] px-6 py-7 md:p-[15px_30px] font-outfit shadow-xl">
      <h4 className="font-outfit font-medium text-[#053F31] mb-[10px] pb-[10px] border-b border-[#DAE6DC]">
        Order Summary
      </h4>

      <div>
        {items.map((item, index) => (
          <OrderItem key={index} {...item} />
        ))}
      </div>

      <div className=" border-t border-[#053F31]/50 pt-2 flex flex-col gap-2">
        <div className="flex items-center justify-between">
          <span className="font-outfit text-[16px] font-normal text-[#333333]">
            Subtotal
          </span>
          <span className="font-outfit !text-[20px] font-semibold text-[#053F31]">
            {subtotal}
          </span>
        </div>

        <div className="flex items-center justify-between">
          <span className="font-outfit text-[16px] font-normal text-[#333333]">
            VAT{vatPercent?.trim() ? ` (${vatPercent})` : ""}
          </span>
          <span className="font-outfit !text-[20px] font-semibold text-[#053F31]">
            {vat}
          </span>
        </div>

        {shipping && (
          <div className="flex items-center justify-between">
            <span className="font-outfit text-[16px] font-normal text-[#333333]">
              Shipping
            </span>
            <span className="font-outfit !text-[20px] font-semibold text-[#053F31]">
              {shipping}
            </span>
          </div>
        )}

        <div className="border-t border-[#D9D9D9] my-1" />

        <div className="flex items-center justify-between">
          <span className="font-outfit text-[16px] font-normal text-[#000000]">
            Total Paid
          </span>
          <h3 className="font-outfit text-[22px] font-bold text-[#053F31]">
            {total}
          </h3>
        </div>
      </div>
    </section>
  );
}