"use client";

import React, { useState } from "react";
import AddToCartButton from "./AddToCartButton";
import { QuantityInput } from "@/components/ui/quantity-input";
import { formatCurrency } from "@/lib/format";

interface BuyBoxProps {
  product: {
    id: string;
    name: string;
    price: number;
    image: string;
  };
}

export const BuyBox: React.FC<BuyBoxProps> = ({
  product: { id, name, price, image },
}) => {
  const [quantity, setQuantity] = useState(1);

  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
        <QuantityInput value={quantity} onValueChange={setQuantity} />
        {quantity > 1 && (
          <span className="text-sm font-medium text-gray-600 animate-in fade-in slide-in-from-left-2">
            Summe: {formatCurrency(price * quantity)}
          </span>
        )}
      </div>
      <AddToCartButton
        product={{
          id: id,
          name: name,
          price: price,
          image: image,
          quantity: quantity,
        }}
      />
    </div>
  );
};