App Diagnóstico Médico em Português

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

function App() {
  const [name, setName] = useState('');
  const [symptoms, setSymptoms] = useState('');
  const [diagnosis, setDiagnosis] = useState('');
  const [advice, setAdvice] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Here you would typically call an API to get the diagnosis and advice
    // For now, we'll just set some placeholder text
    setDiagnosis('Possível diagnóstico baseado nos sintomas.');
    setAdvice('Recomendação profissional para o tratamento.');
  };

  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Diagnóstico Médico Online</h1>
      </header>

      <main className="p-4">
        <form onSubmit={handleSubmit} className="mb-4">
          <div className="mb-4">
            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
              Nome
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="name"
              type="text"
              placeholder="Digite seu nome"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
          </div>

          <div className="mb-6">
            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="symptoms">
              Sintomas
            </label>
            <textarea
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
              id="symptoms"
              placeholder="Descreva seus sintomas"
              value={symptoms}
              onChange={(e) => setSymptoms(e.target.value)}
            />
          </div>

          <div className="flex items-center justify-between">
            <button
              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="submit"
            >
              Obter Diagnóstico
            </button>
          </div>
        </form>

        {diagnosis && (
          <div className="mt-4">
            <h2 className="text-xl font-bold mb-2">Diagnóstico:</h2>
            <p className="text-gray-700">{diagnosis}</p>
          </div>
        )}

        {advice && (
          <div className="mt-4">
            <h2 className="text-xl font-bold mb-2">Recomendações:</h2>
            <p className="text-gray-700">{advice}</p>
          </div>
        )}
      </main>

      <footer className="bg-gray-800 text-white text-center p-4 mt-8">
        <p>© 2025 Diagnóstico Médico Online. Todos os direitos reservados.</p>
      </footer>
    </div>
  );
}

export default App;