import React from 'react';
type FieldWrapperProps = {
  label: string;
  htmlFor: string;
  required?: boolean;
  error?: string;
  children: React.ReactNode;
};
export function FieldWrapper({
  label,
  htmlFor,
  required,
  error,
  children
}: FieldWrapperProps) {
  return (
    <div>
      <label
        htmlFor={htmlFor}
        className="block text-sm font-semibold text-brand-ink">
        
        {label}
        {required &&
        <span className="ml-1 text-brand-deep" aria-hidden="true">
            *
          </span>
        }
      </label>
      <div className="mt-1.5">{children}</div>
      {error &&
      <p
        id={`${htmlFor}-error`}
        className="mt-1.5 text-xs font-medium text-red-600"
        role="alert">
        
          {error}
        </p>
      }
    </div>);

}
const inputClasses = (hasError: boolean) =>
`w-full rounded-xl border bg-white px-4 py-3 text-sm text-brand-ink placeholder:text-brand-ink/35 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-mid/40 ${hasError ? 'border-red-400 focus:border-red-400' : 'border-brand-ink/15 focus:border-brand-mid'}`;
type TextFieldProps = {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  required?: boolean;
  error?: string;
  type?: string;
  placeholder?: string;
  autoComplete?: string;
};
export function TextField({
  id,
  label,
  value,
  onChange,
  required,
  error,
  type = 'text',
  placeholder,
  autoComplete
}: TextFieldProps) {
  return (
    <FieldWrapper label={label} htmlFor={id} required={required} error={error}>
      <input
        id={id}
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        autoComplete={autoComplete}
        aria-invalid={!!error}
        aria-describedby={error ? `${id}-error` : undefined}
        className={inputClasses(!!error)} />
      
    </FieldWrapper>);

}
type SelectFieldProps = {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  options: string[];
  required?: boolean;
  error?: string;
  placeholder?: string;
};
export function SelectField({
  id,
  label,
  value,
  onChange,
  options,
  required,
  error,
  placeholder = 'Select…'
}: SelectFieldProps) {
  return (
    <FieldWrapper label={label} htmlFor={id} required={required} error={error}>
      <select
        id={id}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        aria-invalid={!!error}
        aria-describedby={error ? `${id}-error` : undefined}
        className={`${inputClasses(!!error)} ${value === '' ? 'text-brand-ink/35' : ''}`}>
        
        <option value="" disabled>
          {placeholder}
        </option>
        {options.map((opt) =>
        <option key={opt} value={opt} className="text-brand-ink">
            {opt}
          </option>
        )}
      </select>
    </FieldWrapper>);

}
type TextAreaFieldProps = {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  required?: boolean;
  error?: string;
  placeholder?: string;
  rows?: number;
};
export function TextAreaField({
  id,
  label,
  value,
  onChange,
  required,
  error,
  placeholder,
  rows = 4
}: TextAreaFieldProps) {
  return (
    <FieldWrapper label={label} htmlFor={id} required={required} error={error}>
      <textarea
        id={id}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        rows={rows}
        aria-invalid={!!error}
        aria-describedby={error ? `${id}-error` : undefined}
        className={`${inputClasses(!!error)} resize-y`} />
      
    </FieldWrapper>);

}
type CheckboxGroupProps = {
  legend: string;
  required?: boolean;
  error?: string;
  options: string[];
  selected: string[];
  onToggle: (value: string) => void;
};
export function CheckboxGroup({
  legend,
  required,
  error,
  options,
  selected,
  onToggle
}: CheckboxGroupProps) {
  return (
    <fieldset aria-invalid={!!error}>
      <legend className="text-sm font-semibold text-brand-ink">
        {legend}
        {required &&
        <span className="ml-1 text-brand-deep" aria-hidden="true">
            *
          </span>
        }
      </legend>
      <div className="mt-2 flex flex-wrap gap-2.5">
        {options.map((opt) => {
          const active = selected.includes(opt);
          return (
            <label
              key={opt}
              className={`flex cursor-pointer items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-colors ${active ? 'border-brand-deep bg-brand-mist text-brand-deep' : 'border-brand-ink/15 text-brand-ink/65 hover:border-brand-ink/30'}`}>
              
              <input
                type="checkbox"
                checked={active}
                onChange={() => onToggle(opt)}
                className="h-4 w-4 rounded border-brand-ink/25 text-brand-deep accent-[#007C84] focus:ring-brand-mid/40" />
              
              {opt}
            </label>);

        })}
      </div>
      {error &&
      <p className="mt-1.5 text-xs font-medium text-red-600" role="alert">
          {error}
        </p>
      }
    </fieldset>);

}
export function validateEmail(email: string): boolean {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}