'use client'

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

interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
  label?: string
  options: { value: string; label: string }[]
}

export const Select = forwardRef<HTMLSelectElement, SelectProps>(
  ({ className, label, options, id, ...props }, ref) => (
    <div className="space-y-1.5">
      {label && (
        <label htmlFor={id} className="block text-sm font-semibold text-[var(--premium-muted-text)]">
          {label}
        </label>
      )}
      <select
        ref={ref}
        id={id}
        className={cn(
          'w-full rounded-xl border border-[var(--premium-border)] bg-[var(--premium-field-bg)] px-3 py-2 text-sm text-[var(--premium-field-text)] shadow-[inset_0_1px_2px_rgba(0,0,0,0.12)] transition-all focus:border-brand-400/70 focus:outline-none focus:ring-2 focus:ring-brand-400/20',
          className,
        )}
        {...props}
      >
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    </div>
  ),
)

Select.displayName = 'Select'