/**
 * Checkbox widget component with Nordic styling.
 *
 * ⚠️ AUTO-GENERATED BY PRISM - DO NOT EDIT
 */

import type { WidgetBaseProps } from '../types';

export function Checkbox({
  name,
  value,
  onChange,
  label,
  description,
  required,
  disabled,
  error,
  className,
}: WidgetBaseProps<boolean>): JSX.Element {
  return (
    <div className={className}>
      <label htmlFor={name} className="flex items-start gap-3 cursor-pointer">
        <input
          id={name}
          type="checkbox"
          name={name}
          checked={value ?? false}
          onChange={(e) => onChange(e.target.checked)}
          disabled={disabled}
          required={required}
          className="checkbox mt-0.5"
          aria-invalid={!!error}
          aria-describedby={description ? `${name}-desc` : error ? `${name}-error` : undefined}
        />
        <span className="text-sm">
          <span className="font-medium text-nordic-700">
            {label}
            {required && <span className="text-red-500 ml-1">*</span>}
          </span>
          {description && !error && (
            <span id={`${name}-desc`} className="block text-nordic-500 mt-0.5">{description}</span>
          )}
        </span>
      </label>
      {error && (
        <p id={`${name}-error`} className="mt-1.5 text-sm text-red-600">
          {error}
        </p>
      )}
    </div>
  );
}
