import React from 'react';
import { cn } from '../../lib/utils.ts';

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

export const Select: React.FC<SelectProps> = ({ label, options, className, ...props }) => {
  return (
    <div className="space-y-1">
      {label && <label className="block text-sm font-medium text-[var(--ink)]">{label}</label>}
      <select
        className={cn(
          'w-full h-10 px-3 rounded-[var(--r)] border bg-[var(--surface)] text-[var(--ink)] focus:border-[var(--brand-500)] focus:ring-2 focus:ring-[var(--brand-500)]/20 transition',
          className
        )}
        {...props}
      >
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    </div>
  );
};