import type { FC, SelectHTMLAttributes } from 'react';
import { cn } from '../../lib/utils';

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

export const Select: FC<SelectProps> = ({ label, error, className, options, id, ...props }) => {
  const selectId = id ?? (label ? `select-${label.replace(/\s+/g, '-').toLowerCase()}` : undefined);
  return (
    <div className={cn('w-full', className)}>
      {label && (
        <label htmlFor={selectId} className="block text-xs font-medium text-homenest-bark-muted mb-1.5">
          {label}
        </label>
      )}
      <select
        id={selectId}
        className={cn(
          'w-full rounded-xl border bg-homenest-cream-light px-3 py-2.5 text-sm text-homenest-bark focus:outline-none focus:ring-2 focus:ring-homenest-brown/30 focus:border-homenest-brown transition appearance-none',
          error ? 'border-homenest-rose focus:border-homenest-rose focus:ring-homenest-rose/20' : 'border-homenest-sand'
        )}
        {...props}
      >
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
      {error && <p className="mt-1.5 text-xs text-homenest-rose">{error}</p>}
    </div>
  );
};

export default Select;
