import React from 'react'
import { cn } from '../lib/utils'
import { p } from './my-text'
import { Minus, Plus } from 'lucide-react'

interface QuantifierProps {
  value: number
  setValue: (value: number) => void
  step?: number
  unit?: string | { shortNotation: string }
  min?: number
  max?: number
}

export function Quantifier({
  value,
  setValue,
  step = 1,
  min = 0,
  max = 99,
}: QuantifierProps) {
  const decrease = () => {
    if (value > min) setValue(value - step)
  }

  const increase = () => {
    if (value < max) setValue(value + step)
  }

  return (
    <div className="inline-flex items-center rounded-lg border border-gray-200">
      <button
        onClick={decrease}
        disabled={value <= min}
        className="flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30"
      >
        <Minus className="h-3.5 w-3.5" />
      </button>
      <p weight="semibold" className="min-w-[32px] text-center text-sm">
        {value}
      </p>
      <button
        onClick={increase}
        disabled={value >= max}
        className="flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30"
      >
        <Plus className="h-3.5 w-3.5" />
      </button>
    </div>
  )
}

export function MiniQuantifier({
  value,
  setValue,
  step = 1,
  min = 0,
  max = 99,
}: QuantifierProps) {
  return (
    <div className="inline-flex items-center rounded-md border border-gray-200">
      <button
        onClick={() => value > min && setValue(value - step)}
        disabled={value <= min}
        className="flex h-6 w-6 items-center justify-center text-gray-500 disabled:opacity-30"
      >
        <Minus className="h-3 w-3" />
      </button>
      <p weight="semibold" className="min-w-[24px] text-center text-xs">
        {value}
      </p>
      <button
        onClick={() => value < max && setValue(value + step)}
        disabled={value >= max}
        className="flex h-6 w-6 items-center justify-center text-gray-500 disabled:opacity-30"
      >
        <Plus className="h-3 w-3" />
      </button>
    </div>
  )
}