import { Checkbox } from '#/components/atoms/checkbox.jsx';
import { cn } from '#/lib/utils.js';

/**
 * One thing a settings group turns on or off: the tick box, the name it
 * governs, and a note for what the name does not say. The name is the box's
 * own label, so it is a target as well as a caption.
 * @param {{id: string, checked: boolean, onCheckedChange: (checked: boolean) => void, name: string, note?: string, disabled?: boolean, className?: string}} props
 */
export function OptionRow({
  id,
  checked,
  onCheckedChange,
  name,
  note,
  disabled = false,
  className,
}) {
  return (
    <div className={cn('flex items-center gap-2.5 py-1', className)}>
      <Checkbox
        id={id}
        checked={checked}
        onCheckedChange={onCheckedChange}
        disabled={disabled}
      />
      <label
        htmlFor={id}
        className="min-w-0 cursor-pointer truncate font-mono text-[13px]"
      >
        {name}
      </label>
      {note && (
        <span className="shrink-0 text-[11.5px] text-faint">{note}</span>
      )}
    </div>
  );
}