'use client';
import clsx from 'clsx';
import { useEffect, useState, } from 'react';
import { FaSortDown } from 'react-icons/fa';
import { generateUniqueId } from '../../../utils';
import { Each } from '../../00-base';
import { generateBorder } from '../Input/utils/border';
import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText';
/**
 * Select component for rendering a dropdown with customizable options, labels, helper text, and error messages.
 *
 * @component
 * @example
 * // Example usage of Select component
 * <Select
 *   label="Choose an option"
 *   options={{ option1: 'Option 1', option2: 'Option 2' }}
 *   select={{ className: 'custom-class' }}
 *   placeholder="Select an option"
 *   helperText="Please select an option"
 *   error="This field is required"
 * />
 *
 * @param {Object} props - The properties of the Select component.
 * @param {string} props.label - The label text for the select dropdown.
 * @param {Record<string, string>} props.options - The options for the select dropdown, where the key is the value and the value is the display text.
 * @param {Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'children'>} [props.select] - The properties for the select element.
 * @param {string} [props.placeholder] - Optional placeholder text to display when no option is selected.
 * @param {string} [props.helperText] - Optional helper text to be displayed below the select dropdown.
 * @param {string} [props.error] - Optional error message to be displayed below the select dropdown.
 *
 * @returns {ReactNode} The rendered Select component.
 */
export function Select({ label, options, select, placeholder, helperText, error, }) {
    const [id, setId] = useState('');
    const selectClasses = clsx('peer h-full w-full appearance-none rounded-full border border-none bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all', select?.className);
    const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error);
    if (id) {
        select ? (select.id = id) : (select = { id });
        labelProps.htmlFor = id;
    }
    if (!select || !Object.hasOwn(select, 'value')) {
        select = { ...select, defaultValue: '' };
    }
    useEffect(() => {
        setId(generateUniqueId());
    }, []);
    return (<div className="w-full max-w-full">
      <div className="relative h-9">
        <select {...select} id={id} className={selectClasses}>
          {!!placeholder && (<option value="" disabled hidden>
              {placeholder}
            </option>)}
          <Each of={Object.entries(options)} render={([value, text]) => (<option key={value} value={value}>
                {text}
              </option>)}/>
        </select>
        <label {...labelProps}>{label}</label>
        <FaSortDown className="absolute top-2 right-4"/>
        <fieldset className={fieldsetClasses}>
          <legend className={legendClasses}>{label}</legend>
        </fieldset>
      </div>
      <RenderErrorOrHelperText disabled={select.disabled} helperText={helperText} error={error} className="pl-6"/>
    </div>);
}
//# sourceMappingURL=Select.jsx.map