import Image from "next/image";
import { Button } from "@/components/ui/button";
import type { StorefrontCart } from "@/types/storefront";
import { siteConfig } from "@/lib/site-config";

export function CartSheetPreview({ cart }: { cart: StorefrontCart }) {
  return (
    <section className="space-y-5 rounded-[1.75rem] border border-line bg-surface p-5 shadow-[0_24px_60px_rgba(21,44,62,0.08)]">
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary/56">
            {siteConfig.name}
          </p>
          <h2 className="text-xl font-semibold tracking-[-0.03em] text-primary">
            Brzi pregled košarice
          </h2>
        </div>
        <span className="text-sm font-semibold text-primary/72">
          {cart.itemCount} stavke
        </span>
      </div>

      <div className="space-y-4">
        {cart.items.slice(0, 2).map((item) => (
          <article key={item.key} className="flex items-start gap-4">
            <div className="relative size-16 overflow-hidden rounded-[1rem] bg-[linear-gradient(135deg,#efe4d9_0%,#ffffff_100%)]">
              {item.image ? (
                <Image
                  src={item.image.src}
                  alt={item.image.alt || item.name}
                  fill
                  sizes="64px"
                  className="object-cover"
                />
              ) : null}
            </div>
            <div className="min-w-0 flex-1">
              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-primary/56">
                {item.label}
              </p>
              <p className="line-clamp-2 text-sm font-semibold text-primary">
                {item.name}
              </p>
            </div>
            <p className="text-sm font-semibold text-primary">{item.total}</p>
          </article>
        ))}
      </div>

      <div className="flex items-center justify-between gap-4 border-t border-line pt-4">
        <span className="text-sm text-primary/72">Ukupno</span>
        <span className="text-lg font-semibold text-primary">{cart.total}</span>
      </div>

      <div className="grid gap-3 sm:grid-cols-2">
        <Button href="/cart" variant="secondary" size="sm">
          Otvori košaricu
        </Button>
        <Button href="/checkout" size="sm">
          Nastavi na checkout
        </Button>
      </div>
    </section>
  );
}