import { Badge, Button } from "@cronus-ui/ui";
import { productById, RATING_SUMMARY } from "../lib/demo-store.js";
import { Headphones, Minus, Plus, ShieldCheck, ShoppingCart, Star, StarHalf } from "lucide-react";

const product = productById("aurora");

export function ProductDetailMinimalBlock() {
  return (
    <section
      aria-label="Product detail"
      className="mx-auto flex w-full max-w-md flex-col items-center gap-6 text-center"
    >
      <div className="relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary/25 to-info/15">
        <Headphones className="size-24 text-fg/40" aria-hidden="true" />
        <div className="absolute start-4 top-4">
          <Badge variant="primary">Limited run</Badge>
        </div>
      </div>

      <div className="flex flex-col items-center gap-2">
        <span className="text-xs font-medium uppercase tracking-wide text-fg-tertiary">
          Aurora Audio
        </span>
        <h1 className="font-display text-2xl font-semibold text-fg">{product?.name}</h1>
        <div className="flex items-center gap-2">
          <span className="flex items-center gap-0.5">
            <Star className="size-4 fill-warning text-warning" aria-hidden="true" />
            <Star className="size-4 fill-warning text-warning" aria-hidden="true" />
            <Star className="size-4 fill-warning text-warning" aria-hidden="true" />
            <Star className="size-4 fill-warning text-warning" aria-hidden="true" />
            <StarHalf className="size-4 fill-warning text-warning" aria-hidden="true" />
          </span>
          <span className="text-sm text-fg-secondary">
            {product?.rating} · {RATING_SUMMARY.count} reviews
          </span>
        </div>
        <p className="text-sm leading-relaxed text-fg-secondary">
          Adaptive noise cancellation, spatial audio and a 40-hour battery. Everything you
          need, nothing you don&apos;t.
        </p>
      </div>

      <div className="flex items-baseline gap-2">
        <span className="font-display text-3xl font-semibold text-fg">$349.00</span>
        <span className="text-base text-fg-tertiary line-through">$399.00</span>
      </div>

      <div className="flex w-full flex-col gap-3">
        <div className="flex items-center justify-center gap-3">
          <div className="flex items-center rounded-lg border border-border">
            <Button variant="ghost" size="icon" className="rounded-e-none">
              <Minus className="size-4" aria-hidden="true" />
              <span className="sr-only">Decrease quantity</span>
            </Button>
            <span className="w-10 text-center text-sm font-medium text-fg">1</span>
            <Button variant="ghost" size="icon" className="rounded-s-none">
              <Plus className="size-4" aria-hidden="true" />
              <span className="sr-only">Increase quantity</span>
            </Button>
          </div>
          <Button variant="primary" size="lg" className="flex-1">
            <ShoppingCart className="size-4" aria-hidden="true" />
            Add to cart
          </Button>
        </div>
        <p className="flex items-center justify-center gap-2 text-xs text-fg-tertiary">
          <ShieldCheck className="size-3.5" aria-hidden="true" />
          Secure checkout · Free shipping · 60-day returns
        </p>
      </div>
    </section>
  );
}