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

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

interface SelectOption {
  value: string;
  label: string;
}

interface SelectProps extends WidgetBaseProps<string> {
  options?: SelectOption[] | string[];
}

export function Select({
  name,
  value,
  onChange,
  label,
  description,
  placeholder,
  required,
  disabled,
  error,
  className,
  options = [],
}: SelectProps): JSX.Element {
  // Normalize options to { value, label } format
  const normalizedOptions: SelectOption[] = options.map((opt) =>
    typeof opt === 'string' ? { value: opt, label: opt } : opt
  );

  return (
    <div className={className}>
      {label && (
        <label htmlFor={name} className="label">
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      <select
        id={name}
        name={name}
        value={value ?? ''}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        required={required}
        className={error ? 'select input-error' : 'select'}
        aria-invalid={!!error}
        aria-describedby={description ? `${name}-desc` : error ? `${name}-error` : undefined}
      >
        {placeholder && (
          <option value="" disabled>
            {placeholder}
          </option>
        )}
        {normalizedOptions.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
      {description && !error && (
        <p id={`${name}-desc`} className="mt-1.5 text-sm text-nordic-500">{description}</p>
      )}
      {error && (
        <p id={`${name}-error`} className="mt-1.5 text-sm text-red-600">
          {error}
        </p>
      )}
    </div>
  );
}
