//@/components/Checkbox/Checkbox.tsx

import React from 'react';

interface CheckboxProps {
  label?: string;
  helperText?: string;
  errorText?: string;
  checked: boolean;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const checkboxStyles = {
  base: "mr-2 cursor-pointer",
  label: "font-semibold",
  helperText: "text-sm text-gray-500",
  errorText: "text-sm text-red-500",
};

const Checkbox: React.FC<CheckboxProps> = ({
  label,
  helperText,
  errorText,
  checked,
  onChange,
}) => {
  const hasError = Boolean(errorText);

  return (
    <div className="flex flex-col mb-4">
      <label className="flex items-center cursor-pointer">
        <input
          type="checkbox"
          checked={checked}
          onChange={onChange}
          className={checkboxStyles.base}
        />
        {label && <span className={checkboxStyles.label}>{label}</span>}
      </label>
      {helperText && !hasError && (
        <span className={checkboxStyles.helperText}>{helperText}</span>
      )}
      {hasError && <span className={checkboxStyles.errorText}>{errorText}</span>}
    </div>
  );
};

export { Checkbox };