"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

type ICounterProps = {
  label: string;
  value: number;
  onChange: (value: number) => void;
};

export default function Counter({ label, value, onChange }: ICounterProps) {
  const increaseHandler = () => onChange(value + 1);
  const decreaseHandler = () => onChange(value > 0 ? value - 1 : 0);

  return (
    <div className="flex items-center gap-3">
      <span className="font-medium text-[16px] leading-[140%]">{label}</span>
      <div className="flex gap-[15px] items-center">
        <Button onClick={decreaseHandler} type="button" className="w-[26px] h-[24px] gap-[10px] rounded-[4px] border border-secondary-color text-secondary-color p-[8px] bg-[#F8F7FC] hover:bg-[#F8F7FC]">-</Button>
        <Input
          type="number"
          placeholder="--"
          value={value === 0 ? '' : value}
          onChange={(e) => onChange(Number(e.target.value))}
          className={cn("text-center w-[58px] h-[32px] gap-[10px] rounded-[4px] pt-[5px] pb-[5px] border border-[#CACACA]", "appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none")}
        />
        <Button onClick={increaseHandler} type="button" className="w-[26px] h-[24px] gap-[10px] rounded-[4px] border border-secondary-color text-neutral-white p-[8px] bg-secondary-color hover:bg-secondary-color">+</Button>
      </div>
    </div>
  );
}