"use client";

import React from "react";
import { Plus, Minus } from "lucide-react";

interface CounterProps {
    label: string;
    value: number;
    onChange: (value: number) => void;
    min?: number;
    max?: number;
}

export const Counter: React.FC<CounterProps> = ({
    label,
    value,
    onChange,
    min = 0,
    max = 10,
}) => {
    const handleIncrement = () => {
        if (value < max) {
            onChange(value + 1);
        }
    };

    const handleDecrement = () => {
        if (value > min) {
            onChange(value - 1);
        }
    };

    return (
        <div className="relative flex w-full items-center justify-between items-center border border-gray-200 rounded-full px-4 py-3 bg-white">
            <label className="absolute left-[32px] top-0 transform -translate-y-1/2 text-xs text-gray-500 transition-all duration-200 bg-white px-1">
                {label}
            </label>
            <button
                onClick={handleDecrement}
                disabled={value <= min}
                className={`w-7 h-7 rounded-[8px] border flex items-center justify-center ${
                    value <= min
                        ? "border-gray-300 text-gray-300 cursor-not-allowed"
                        : "border-gray-400 text-gray-600 hover:border-gray-500"
                }`}
            >
                <Minus className="w-4 h-4" />
            </button>
            <span className="mx-2 text-gray-800 font-medium min-w-[20px] text-center">
                {value}
            </span>
            <button
                onClick={handleIncrement}
                disabled={value >= max}
                className={`w-7 h-7 rounded-[8px] border flex items-center justify-center ${
                    value >= max
                        ? "border-gray-300 text-gray-300 cursor-not-allowed"
                        : "border-[#008299] text-[#008299] hover:border-[#008299]"
                }`}
            >
                <Plus className="w-4 h-4 text-gray-600" />
            </button>
        </div>
    );
};

export default Counter;
