"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Plus, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useCart } from "@/lib/store/cart";
import type { Product } from "@/lib/supabase/types";

export default function AddToCartButton({ product }: { product: Product }) {
  const router = useRouter();
  const addLine = useCart((s) => s.addLine);
  const [added, setAdded] = useState(false);

  function add() {
    addLine(product);
    setAdded(true);
    setTimeout(() => setAdded(false), 1500);
  }

  return (
    <div className="flex flex-col gap-2 sm:flex-row">
      <Button onClick={add} size="lg" className="flex-1">
        {added ? <Check className="h-5 w-5" /> : <Plus className="h-5 w-5" />}
        {added ? "Ajouté au panier" : "Ajouter au panier"}
      </Button>
      <Button
        onClick={() => {
          addLine(product);
          router.push("/panier");
        }}
        size="lg"
        variant="outline"
        className="flex-1"
      >
        Commander maintenant
      </Button>
    </div>
  );
}