'use client';

import { Button } from '@/components/ui/Button';
import { Minus, Plus } from 'lucide-react';

interface QuantityControlsProps {
  quantity: number;
  onIncrease: () => void;
  onDecrease: () => void;
  isDisabled?: boolean;
  minQuantity?: number;
}

export function QuantityControls({
  quantity,
  onIncrease,
  onDecrease,
  isDisabled = false,
  minQuantity = 1
}: QuantityControlsProps) {
  return (
    <div className="flex border border-gray-300 rounded-md">
      <Button
        onClick={onDecrease}
        variant="default"
        className="px-3 py-1 border-0 rounded-none"
        disabled={isDisabled || quantity <= minQuantity}
        aria-label="Decrease quantity"
        size="sm"
      >
        <Minus size={16} />
      </Button>
      <input
        type="text"
        value={quantity}
        readOnly
        className="w-10 text-center border-x border-gray-300"
      />
      <Button
        onClick={onIncrease}
        variant="default"
        className="px-3 py-1 border-0 rounded-none"
        disabled={isDisabled}
        aria-label="Increase quantity"
        size="sm"
      >
        <Plus size={16} />
      </Button>
    </div>
  );
}