/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import { Control, useController } from 'react-hook-form';

export function CheckboxField({
  control,
  name,
  label,
}: {
  control: Control<any>;
  name: string;
  label: string;
}) {
  const { field } = useController({ control, name });

  return (
    <div className="flex items-center gap-2">
      <input
        type="checkbox"
        checked={field.value}
        onChange={(e) => field.onChange(e.target.checked)}
        className="h-4 w-4 border-mma-blue/50 accent-mma-blue"
      />
      <label className="text-sm font-semibold text-mma-blue">{label}</label>
    </div>
  );
}