import Button from "@/components/ui/Button";

import { cn } from "@/lib/utils";

interface OrderSummaryProps {
  title?: string;
  showPromoCode?: boolean;
  promoLabel?: string;
  promoPlaceholder?: string;
  subtotal?: string;
  deliveryFee?: string;
  discountLabel?: string;
  discount?: string;
  total?: string;
  checkoutLabel?: string;
  onApplyPromo?: () => void;
  onCheckout?: () => void;
  className?: string;
}

export default function OrderSummary({
  title = "Order Summary",
  showPromoCode = true,
  promoLabel = "Promo Code",
  promoPlaceholder = "Add  promo code",
  subtotal = "LKR 13,000.00",
  deliveryFee = "200.00",
  discountLabel = "Discount (-20%)",
  discount = "LKR 600.00",
  total = "LKR12,600.00",
  checkoutLabel = "Check Out",
  onApplyPromo,
  onCheckout,
  className,
}: OrderSummaryProps) {
  return (
    <section className={cn("w-full max-w-[560px] rounded-lg bg-[#f7f7f8] p-6 text-[#1f2440]", className)}>
      {title && <h2 className="text-2xl font-medium">{title}</h2>}

      {showPromoCode && (
        <div className="mt-8">
          <label className="text-lg font-medium">
            {promoLabel} <span className="text-red-500">*</span>
          </label>
          <div className="mt-4 flex gap-5">
            <input
              type="text"
              placeholder={promoPlaceholder}
              className="h-16 min-w-0 flex-1 rounded-full bg-[#ededf0] px-10 text-base text-gray-700 outline-none placeholder:text-gray-500"
            />
            <Button
              variant="outline"
              onClick={onApplyPromo}
              className="h-16 min-w-[126px] rounded-full border-[#00AFC1] text-base font-semibold text-[#00AFC1]"
            >
              Apply
            </Button>
          </div>
        </div>
      )}

      <div className="mt-9 space-y-4 text-base">
        <div className="flex items-center justify-between gap-4">
          <span className="text-gray-600">Subtotal</span>
          <span className="font-medium text-[#101936]">{subtotal}</span>
        </div>
        <div className="flex items-center justify-between gap-4">
          <span className="text-gray-600">Delivery Fee</span>
          <span className="font-medium text-[#101936]">{deliveryFee}</span>
        </div>
        <div className="flex items-center justify-between gap-4">
          <span className="text-gray-600">{discountLabel}</span>
          <span className="font-medium text-red-500 line-through">{discount}</span>
        </div>
      </div>

      <div className="my-8 h-px bg-gray-200" />

      <div className="flex items-center justify-between gap-4 text-lg">
        <span>Total</span>
        <span className="text-2xl font-semibold text-[#101936]">{total}</span>
      </div>

      <Button
        variant="teal"
        onClick={onCheckout}
        className="mt-8 h-16 w-full rounded-full text-base font-medium"
      >
        {checkoutLabel}
      </Button>
    </section>
  );
}
