import type { SelectHTMLAttributes, ReactNode } from "react";

type Props = SelectHTMLAttributes<HTMLSelectElement> & {
  label?: string;
  hint?: string;
  children: ReactNode;
};

export function Select({ label, hint, id, className = "", children, required, ...rest }: Props) {
  const inputId = id || rest.name;
  return (
    <label className="hb-field" htmlFor={inputId}>
      {label ? (
        <span className="hb-field__label">
          {label}
          {required ? <span className="hb-field__required" aria-hidden="true">*</span> : null}
        </span>
      ) : null}
      <select id={inputId} className={`hb-select ${className}`.trim()} required={required} {...rest}>
        {children}
      </select>
      {hint ? <span className="hb-field__hint">{hint}</span> : null}
    </label>
  );
}
