import { Minus, Plus } from "lucide-react";
import { useEffect } from "react";
import {
  Button,
  Group,
  Input,
  Label,
  NumberField,
} from "react-aria-components";
import { cn } from "@/lib/utils";

export default function NumberInput({
  maxAllowed,
  label,
  value = 100,
  onChange,
  className,
  isDisabled,
}: {
  maxAllowed?: number;
  label: string;
  value?: number;
  onChange: (value: number) => void;
  className?: string;
  isDisabled?: boolean;
}) {
  useEffect(() => {
    if (maxAllowed) {
      if (value > maxAllowed) {
        onChange(maxAllowed);
      }
    }
  }, [maxAllowed, value, onChange]);

  return (
    <NumberField
      isDisabled={isDisabled}
      className={cn(className)}
      value={value}
      minValue={0}
      onChange={onChange}
    >
      <div className="space-y-2">
        <Label className="text-sm font-medium text-foreground">{label}</Label>
        <Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
          <Button
            slot="decrement"
            className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
          >
            <Minus size={16} strokeWidth={2} aria-hidden="true" />
          </Button>
          <Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
          <Button
            slot="increment"
            className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
          >
            <Plus size={16} strokeWidth={2} aria-hidden="true" />
          </Button>
        </Group>
      </div>
    </NumberField>
  );
}
