import Link from "next/link";
import { Button } from "../ui/button";

function CheckIcon() {
  return (
    <svg
      className="mt-0.5 h-4 w-4 shrink-0"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
    </svg>
  );
}

export function OrderSummaryCard({
  subtotal = 0,
  deliveryFee = 0,
  total,
}: {
  subtotal?: number;
  deliveryFee?: number;
  total?: number;
}) {
  const displayTotal = total ?? subtotal + deliveryFee;

  return (
    <aside className="w-full shrink-0 lg:w-92.5">
      <div className="rounded-[18px] border border-[#d6d6d6] p-6">
        <h2 className="mb-6 text-[1.05rem] font-bold">Order Summary</h2>

        <div className="mb-6 space-y-4 text-sm">
          <div className="flex justify-between">
            <span className="text-[#626262]">Sub Total</span>
            <span className="font-bold">
              {subtotal.toLocaleString()} <span>&#x09F3;</span>
            </span>
          </div>
          <div className="flex justify-between">
            <span className="text-[#626262]">Delivery fee</span>
            <span className="font-bold">
              {deliveryFee} <span>&#x09F3;</span>
            </span>
          </div>
        </div>

        <div className="mb-6 flex items-end justify-between border-t border-[#d6d6d6] pt-6">
          <span className="text-lg font-bold">Total</span>
          <span className="text-2xl font-bold">
            {displayTotal.toLocaleString()} <span>&#x09F3;</span>
          </span>
        </div>

        <div className="mb-8 flex gap-2 text-xs text-[#6a6a6a]">
          <CheckIcon />
          <p>
            90 Day Limited Warranty against manufacturer&apos;s defects
            <Link className="font-bold underline" href="/pages/warranty">
              Details
            </Link>
          </p>
        </div>

        <Link href="/checkout" className="block w-full">
          <Button className="w-full">Checkout Now</Button>
        </Link>
      </div>
    </aside>
  );
}