import { detectFormat, getCompatibleOutputFormats, getFormatMetadata } from '@/core/format-utils';
import type { SupportedFormat } from '@/core/types';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

export default function FormatSelector({
  file,
  selectedFormat,
  onFormatChange,
}: {
  file: File;
  selectedFormat: SupportedFormat | null;
  onFormatChange: (format: SupportedFormat) => void;
}) {
  const formats = getCompatibleOutputFormats(detectFormat(file)!);

  return (
    <Select
      value={selectedFormat || undefined}
      onValueChange={(v) => onFormatChange(v as SupportedFormat)}
    >
      <SelectTrigger className="w-[120px]">
        <SelectValue placeholder="Convert to..." />
      </SelectTrigger>
      <SelectContent>
        {formats.map((fmt) => {
          const meta = getFormatMetadata(fmt);
          return (
            <SelectItem key={fmt} value={fmt}>
              {meta.displayName}
            </SelectItem>
          );
        })}
      </SelectContent>
    </Select>
  );
}