import { ImageResolution } from '../../types/image';

interface ResolutionSelectProps {
  resolutions: ImageResolution[];
  selectedResolution: string;
  onChange: (resolutionId: string) => void;
  disabled?: boolean;
}

export function ResolutionSelect({
  resolutions,
  selectedResolution,
  onChange,
  disabled = false
}: ResolutionSelectProps) {
  return (
    <div className="space-y-2">
      <label className="block text-sm font-medium text-gray-700">
        Выбор разрешения
      </label>
      <select
        value={selectedResolution}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        className="px-2 py-1 mt-1 block w-full rounded-lg border border-gray-300 shadow-sm hover:border-blue-300 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all duration-200"
      >
        {resolutions.map((resolution) => (
          <option key={resolution.id} value={resolution.id}>
            {resolution.label}
          </option>
        ))}
      </select>
    </div>
  );
}