import { FormGrid, SelectField, TextField } from '../../forms';
import type { DownloadUnit } from './types';

export type RasterOptionsFieldsProps = {
  width: string;
  unit: DownloadUnit;
  labels: {
    width: string;
    unit: string;
    autoWidth: string;
    pixels: string;
    centimeters: string;
    millimeters: string;
    inches: string;
  };
  onWidthChange: (value: string) => void;
  onUnitChange: (value: DownloadUnit) => void;
};

export function RasterOptionsFields({ width, unit, labels, onWidthChange, onUnitChange }: RasterOptionsFieldsProps) {
  const unitOptions = [
    { value: 'px', label: labels.pixels },
    { value: 'cm', label: labels.centimeters },
    { value: 'mm', label: labels.millimeters },
    { value: 'in', label: labels.inches },
  ];

  return (
    <FormGrid columns={2}>
      <TextField
        type="number"
        min={1}
        step="any"
        label={labels.width}
        value={width}
        placeholder={labels.autoWidth}
        onValueChange={onWidthChange}
      />
      <SelectField label={labels.unit} required value={unit} options={unitOptions} onValueChange={(value) => onUnitChange(value as DownloadUnit)} />
    </FormGrid>
  );
}
