// components/DetailActionButtons.tsx
"use client";

import { useCartStore } from "@/store/useCartStore";
import { ShoppingBag, Zap } from "lucide-react";

interface DetailActionButtonsProps {
  id: string;
  title: string;
  price: number;
  fileType: string;
  thumbnailUrl: string;
}

export default function DetailActionButtons(props: DetailActionButtonsProps) {
  const { addItem, setOpen } = useCartStore();

  const handleBuyNow = () => {
    addItem({
      id: props.id,
      title: props.title,
      price: props.price,
      fileType: props.fileType,
      thumbnailUrl: props.thumbnailUrl,
    });
    setOpen(true);
  };

  return (
    <div className="grid grid-cols-2 gap-3 pt-2">
      <button
        onClick={() =>
          addItem({
            id: props.id,
            title: props.title,
            price: props.price,
            fileType: props.fileType,
            thumbnailUrl: props.thumbnailUrl,
          })
        }
        className="flex items-center justify-center gap-2 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-white text-xs font-bold py-3 transition active:scale-95"
      >
        <ShoppingBag className="h-4 w-4 text-indigo-400" />
        Add to Cart
      </button>

      <button
        onClick={handleBuyNow}
        className="flex items-center justify-center gap-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold py-3 shadow-lg shadow-indigo-600/30 transition active:scale-95"
      >
        <Zap className="h-4 w-4" />
        Buy Now
      </button>
    </div>
  );
}