'use client';

import React, { useState } from 'react';

interface ProductQuantityProps {
  onChange: (quantity: number) => void;
  initialQuantity?: number;
  min?: number;
  max?: number;
}

export function ProductQuantity({ 
  onChange, 
  initialQuantity = 1,
  min = 1,
  max = 100
}: ProductQuantityProps) {
  const [quantity, setQuantity] = useState(initialQuantity);
  
  const handleIncrement = () => {
    if (quantity < max) {
      const newQuantity = quantity + 1;
      setQuantity(newQuantity);
      onChange(newQuantity);
    }
  };
  
  const handleDecrement = () => {
    if (quantity > min) {
      const newQuantity = quantity - 1;
      setQuantity(newQuantity);
      onChange(newQuantity);
    }
  };
  
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value);
    if (!isNaN(value) && value >= min && value <= max) {
      setQuantity(value);
      onChange(value);
    }
  };
  
  return (
    <div className="flex items-center">
      <button 
        onClick={handleDecrement}
        type="button"
        className="w-10 h-10 border border-gray-300 flex items-center justify-center text-lg font-medium text-gray-600 hover:bg-gray-50"
        disabled={quantity <= min}
      >
        -
      </button>
      <input
        type="text"
        value={quantity}
        onChange={handleInputChange}
        className="w-16 h-10 border-t border-b border-gray-300 text-center focus:outline-none"
        aria-label="Količina"
      />
      <button 
        onClick={handleIncrement}
        type="button"
        className="w-10 h-10 border border-gray-300 flex items-center justify-center text-lg font-medium text-gray-600 hover:bg-gray-50"
        disabled={quantity >= max}
      >
        +
      </button>
    </div>
  );
}