morethanadiagnosis-hub/web/components/common/Checkbox.tsx

'use client'

import React from 'react'

export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: React.ReactNode
  error?: string
}

export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  ({ label, error, className = '', id, ...props }, ref) => {
    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`
    const errorId = `${checkboxId}-error`

    const hasError = Boolean(error)

    const baseStyles = 'h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900'
    const errorStyles = hasError ? 'border-error-500' : ''

    return (
      <div className="flex items-start">
        <div className="flex items-center h-5">
          <input
            ref={ref}
            type="checkbox"
            id={checkboxId}
            className={`${baseStyles} ${errorStyles} ${className}`.trim()}
            aria-invalid={hasError}
            aria-describedby={hasError ? errorId : undefined}
            {...props}
          />
        </div>
        {label && (
          <div className="ml-3 text-sm">
            <label htmlFor={checkboxId} className="text-gray-700 dark:text-gray-200">
              {label}
            </label>
            {error && (
              <p className="text-error-500 mt-1" id={errorId} role="alert">
                {error}
              </p>
            )}
          </div>
        )}
      </div>
    )
  }
)

Checkbox.displayName = 'Checkbox'