managarten/picture/apps/mobile/components/AspectRatioSelector.tsx

import React from 'react';
import { OptionSelector, OptionItem } from './OptionSelector';

export type AspectRatio = {
  label: string;
  value: string;
  width: number;
  height: number;
  icon: string;
};

type AspectRatioSelectorProps = {
  aspectRatios: AspectRatio[];
  selectedAspectRatio: AspectRatio;
  onSelectAspectRatio: (ratio: AspectRatio) => void;
  disabled?: boolean;
};

export function AspectRatioSelector({
  aspectRatios,
  selectedAspectRatio,
  onSelectAspectRatio,
  disabled = false,
}: AspectRatioSelectorProps) {
  // Convert aspect ratios to OptionItems
  const options: OptionItem[] = aspectRatios.map(ratio => ({
    id: ratio.value,
    label: ratio.label,
    subtitle: `${ratio.width}×${ratio.height}`,
  }));

  // Handle selection
  const handleSelect = (option: OptionItem) => {
    const ratio = aspectRatios.find(r => r.value === option.id);
    if (ratio) {
      onSelectAspectRatio(ratio);
    }
  };

  return (
    <OptionSelector
      options={options}
      selectedId={selectedAspectRatio.value}
      onSelect={handleSelect}
      disabled={disabled}
      minWidth={80}
      title="Seitenverhältnis"
    />
  );
}