"use client";

import { ShoppingCart } from "lucide-react";

import { PriceDisplay } from "@/components/price-display";
import { Button } from "@/components/ui/button";

export interface ProductPurchaseBarProps {
  itemId: string;
  title: string;
  price: number;
  originalRetail?: number | null;
  status: string;
  addToCartPending: boolean;
  onAddToCart: (itemId: string) => void;
}

export function ProductPurchaseBar({
  itemId,
  title,
  price,
  originalRetail = null,
  status,
  addToCartPending,
  onAddToCart,
}: ProductPurchaseBarProps) {
  const isAvailable = status.toLowerCase() === "active";

  return (
    <aside
      aria-label={`${title} quick purchase`}
      className="fixed inset-x-0 top-0 z-50 border-b border-slate-200 bg-white/95 shadow-sm backdrop-blur"
    >
      <div className="mx-auto flex h-16 max-w-7xl items-center gap-3 px-4">
        <div className="min-w-0 flex-1">
          <p className="truncate text-sm font-semibold text-slate-900">{title}</p>
          <div className="mt-0.5">
            <PriceDisplay price={price} originalRetail={originalRetail} size="sm" />
          </div>
        </div>
        <Button
          aria-busy={addToCartPending}
          className="h-10 shrink-0 px-4 sm:px-6"
          disabled={addToCartPending || !isAvailable}
          onClick={() => onAddToCart(itemId)}
        >
          <ShoppingCart aria-hidden="true" />
          Add to Cart
        </Button>
      </div>
    </aside>
  );
}