import React, { ChangeEvent, SelectHTMLAttributes } from 'react';

interface SelectOption {
  value: string;
  label: string;
}

interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
  id?: string;
  'aria-label'?: string;
  value?: string;
  onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;
  options: SelectOption[];
  className?: string;
  style?: React.CSSProperties;
}

export function Select({
  id,
  'aria-label': ariaLabel,
  value,
  onChange,
  options,
  className = '',
  style,
  ...props
}: SelectProps) {
  const defaultClasses = 'w-full px-3 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue transition-colors';
  const classes = className ? `${defaultClasses} ${className}` : defaultClasses;

  return (
    <select
      id={id}
      aria-label={ariaLabel}
      value={value}
      onChange={onChange}
      className={classes}
      style={style}
      {...props}
    >
      {options.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
}