'use client';

import { useDebouncedOnChangeCallback } from './hooks';
import { Checkbox, type CheckboxProps } from '@repo/ui/components/ui/checkbox';
import { useState } from 'react';

type Props = Pick<CheckboxProps, 'checked'> & {
  readonly description?: string;
  readonly onChange?: (value: boolean) => Promise<void> | void;
  readonly text: string;
};

export function CheckboxWithText({ checked: initialValue, description, onChange, text }: Props) {
  const [checked, setChecked] = useState(initialValue);
  const { debouncedCallback, isPending } = useDebouncedOnChangeCallback(onChange);

  const handleChange = () => {
    const newValue = !checked;
    setChecked(newValue);
    debouncedCallback(newValue);
  };

  return (
    <div className="flex items-start space-x-2">
      <Checkbox checked={checked} disabled={isPending} id="terms1" onCheckedChange={handleChange} />
      <div className="grid gap-1.5 leading-none">
        <label
          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
          htmlFor="terms1"
        >
          {text}
        </label>
        {description ? <p className="text-sm text-muted-foreground">{description}</p> : false}
      </div>
    </div>
  );
}