import type { Signal } from "@preact/signals";
import { Button } from "@components/Button.tsx";
import { TbCircleMinus, TbCirclePlus } from "@preact-icons/tb";

interface CounterProps {
  count: Signal<number>;
}

export default function Counter(props: CounterProps) {
  props.count.value = Math.max(1, props.count.value);
  return (
    <div class="flex items-center px-1 py-2 rounded-xl">
      <Button onClick={() => props.count.value -= 1}>
        <TbCircleMinus class="h-6 w-6" />
      </Button>
      <input
        class="text-3xl bg-transparent inline text-center -mx-4"
        type="number"
        size={props.count.toString().length}
        value={props.count}
        onInput={(ev) => {
          const target = ev.target as HTMLInputElement;
          props.count.value = Math.max(1, Number(target.value));
        }}
      />
      <Button onClick={() => props.count.value += 1}>
        <TbCirclePlus class="h-6 w-6" />
      </Button>
    </div>
  );
}