import './App.css';
import { useState } from 'react';

function App() {
  const [datasetQuarry, setDatasetQuarry] = useState('');
  const [tableQuarry, setTableQuarry] = useState('');
  const [columns, setColumns] = useState('');
  const [results, setResults] = useState('');

  const handleButtonClick = () => {
    
    setResults('Tutaj możesz umieścić swoje wyniki.');
  };
  return (
    <div className="container">
      <div className="row">
        <div className="column">
          <input
            type="text"
            placeholder="Dataset quarry"
            value={datasetQuarry}
            onChange={(e) => setDatasetQuarry(e.target.value)}
          />
          <input
            type="text"
            placeholder="Table quarry"
            value={tableQuarry}
            onChange={(e) => setTableQuarry(e.target.value)}
          />
        </div>
        <div className="column">
          <input
            className="col"
            type="text"
            placeholder="Columns"
            value={columns}
            onChange={(e) => setColumns(e.target.value)}
          />
        </div>
      </div>
      <div className="row">
        <button type="button" onClick={handleButtonClick}>
          Test
        </button>
      </div>
      <div className="row">
        <textarea
          placeholder="Resoults"
          value={results}
          onChange={(e) => setResults(e.target.value)}
        ></textarea>
      </div>
    </div>
  );
}

export default App;