// src/components/PlzSelector.tsx
import React, { useState } from 'react';

interface PlzSelectorProps {
  columns: string[];
  onSubmit: (selectedColumn: string) => void;
  isLoading: boolean;
}

const PlzSelector: React.FC<PlzSelectorProps> = ({ columns, onSubmit, isLoading }) => {
  const [selectedColumn, setSelectedColumn] = useState<string>(columns[0] || '');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (selectedColumn) {
      onSubmit(selectedColumn);
    }
  };

  return (
    <div className="plz-selector" style={{ padding: '20px', border: '1px solid #555', borderRadius: '5px', marginTop: '20px' }}>
      <h3>Postal Code Column Not Found</h3>
      <p>Please select the column containing the postal codes (PLZ) from the list below.</p>
      <form onSubmit={handleSubmit}>
        <select 
          value={selectedColumn} 
          onChange={(e) => setSelectedColumn(e.target.value)}
          style={{ width: '100%', padding: '8px', marginBottom: '10px' }}
        >
          {columns.map(col => (
            <option key={col} value={col}>{col}</option>
          ))}
        </select>
        <button type="submit" disabled={isLoading || !selectedColumn} style={{ width: '100%', padding: '10px' }}>
          {isLoading ? 'Confirming...' : 'Confirm'}
        </button>
      </form>
    </div>
  );
};

export default PlzSelector;
