import { forwardRef, type SelectHTMLAttributes } from 'react';
import { inputVariants, type InputSize, type InputState } from '@lib/theme/variants';
import { cn } from '@lib/utils/cn';

/**
 * Select — 네이티브 select 래퍼.
 *
 * **접근성 정책 (타입으로 강제)**:
 * 스크린 리더가 select의 용도를 읽을 수 있도록 아래 3개 중 하나는 필수:
 *  - `aria-label`: 짧은 텍스트 라벨 (예: "등급 필터")
 *  - `aria-labelledby`: 다른 요소의 ID 참조
 *  - `title`: 툴팁 (접근 이름 폴백)
 *
 * 사용 예:
 *   <Select aria-label="상태 필터" value={v} onChange={...}>...</Select>
 *   <Select title="등급 필터" value={v} onChange={...}>...</Select>
 */

type BaseSelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
  size?: InputSize;
  state?: InputState;
};

type SelectWithAccessibleName =
  | (BaseSelectProps & { 'aria-label': string })
  | (BaseSelectProps & { 'aria-labelledby': string })
  | (BaseSelectProps & { title: string });

export type SelectProps = SelectWithAccessibleName;

export const Select = forwardRef<HTMLSelectElement, SelectProps>(
  ({ className, size, state, children, ...props }, ref) => {
    return (
      <select
        ref={ref}
        className={cn(inputVariants({ size, state }), 'cursor-pointer', className)}
        {...props}
      >
        {children}
      </select>
    );
  },
);
Select.displayName = 'Select';