import { SelectHTMLAttributes, forwardRef } from 'react';
import { cn } from '@/utils/cn';

interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
  label?: string;
}

export const Select = forwardRef<HTMLSelectElement, Props>(
  ({ className, label, id, children, ...props }, ref) => (
    <div className="space-y-1.5">
      {label && (
        <label htmlFor={id} className="block text-sm font-medium text-ink-700">
          {label}
        </label>
      )}
      <select
        id={id}
        ref={ref}
        className={cn(
          'w-full h-10 rounded-lg border border-ink-200 bg-white px-3 text-sm text-ink-900',
          'focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100',
          className,
        )}
        {...props}
      >
        {children}
      </select>
    </div>
  ),
);
Select.displayName = 'Select';