components/ui/Checkbox.jsx

import React from 'react';

/**
 * A customizable checkbox component.
 *
 * @param {object} props - The component's properties.
 * @param {string} props.name - The name attribute of the checkbox input.
 * @param {string} props.label - The text label for the checkbox.
 * @param {boolean} props.checked - The checked state of the checkbox.
 * @param {function} props.onChange - The function to call when the checkbox state changes.
 * @param {boolean} [props.disabled=false] - Whether the checkbox is disabled.
 * @returns {React.Element} The rendered checkbox component.
 */
const Checkbox = ({ name, label, checked, onChange, disabled = false }) => {
  return (
    <div className="flex items-center mb-2">
      <input
        type="checkbox"
        id={name}
        name={name}
        checked={checked}
        onChange={onChange}
        disabled={disabled}
        className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
      />
      <label htmlFor={name} className="ml-2 block text-sm text-gray-900">
        {label}
      </label>
    </div>
  );
};

export default Checkbox;