"use client";

import { useState } from "react";
import { useCart } from "@/lib/cart-context";
import { useToast } from "@/lib/toast-context";
import { QuantitySelector } from "./QuantitySelector";

export function ProductDetailActions({
  productId,
  productName,
  stock,
}: {
  productId: string;
  productName: string;
  stock: number;
}) {
  const [qty, setQty] = useState(1);
  const { addItem, openCart } = useCart();
  const { show } = useToast();
  const outOfStock = stock <= 0;

  return (
    <div className="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center">
      {!outOfStock && (
        <QuantitySelector quantity={qty} onChange={(n) => setQty(Math.max(1, n))} max={stock} />
      )}
      <button
        type="button"
        disabled={outOfStock}
        onClick={() => {
          addItem(productId, qty);
          show(`Added ${productName} to cart`);
        }}
        className="flex-1 rounded-lg bg-brand-orange px-6 py-3 text-sm font-semibold text-white transition hover:bg-brand-orange-dark disabled:cursor-not-allowed disabled:bg-black/10 disabled:text-black/40 sm:flex-none"
      >
        {outOfStock ? "Sold out" : "Add to cart"}
      </button>
      {!outOfStock && (
        <button
          type="button"
          onClick={() => {
            addItem(productId, qty);
            openCart();
          }}
          className="text-sm font-medium text-brand-ink underline underline-offset-4 hover:text-brand-orange-dark"
        >
          Buy now
        </button>
      )}
    </div>
  );
}