import React, { useEffect, useState } from 'react';
import TodoList from './components/TodoList';
import { getVersion } from './services/api';
import './App.css';

function App() {
  const [backendVersion, setBackendVersion] = useState('...');
  const frontendVersion = import.meta.env.VITE_APP_VERSION || 'dev';

  useEffect(() => {
    const fetchVersion = async () => {
      try {
        const data = await getVersion();
        setBackendVersion(data.version || 'dev');
      } catch (error) {
        console.error('Error fetching backend version:', error);
        setBackendVersion('unknown');
      }
    };
    fetchVersion();
  }, []);

  return (
    <div className="app-container">
      <main className="main-content">
        <TodoList />
      </main>
      <footer className="app-footer">
        <p>Frontend <code>{frontendVersion}</code> | Backend <code>{backendVersion}</code></p>
      </footer>
    </div>
  );
}

export default App;