import React, { forwardRef } from "react";

interface FormCheckboxProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
}

export const FormCheckbox = forwardRef<HTMLInputElement, FormCheckboxProps>(
  ({ label, ...props }, ref) => (
    <label className="flex items-center space-x-3 cursor-pointer group">
      <input
        type="checkbox"
        ref={ref}
        className="
          w-5 h-5 rounded
          border-gray-300 text-blue-600
          focus:ring-2 focus:ring-blue-500
          transition duration-150 ease-in-out
          cursor-pointer
        "
        {...props}
      />
      <span className="text-sm text-gray-700 group-hover:text-gray-900">
        {label}
      </span>
    </label>
  ),
);

FormCheckbox.displayName = "FormCheckbox";