import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import JsonTool from './pages/JsonTool';
import SerializeTool from './pages/SerializeTool';
import UrlTool from './pages/UrlTool';
import Base64Tool from './pages/Base64Tool';
import CsvJsonTool from './pages/CsvJsonTool';
import BeautifierTool from './pages/BeautifierTool';
import DiffTool from './pages/DiffTool';
import TextLengthTool from './pages/TextLengthTool';

import './index.css';

function App() {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/json" element={<JsonTool />} />
          <Route path="/serialize" element={<SerializeTool />} />
          <Route path="/url" element={<UrlTool />} />
          <Route path="/base64" element={<Base64Tool />} />
          <Route path="/csv-json" element={<CsvJsonTool />} />
          <Route path="/beautifier" element={<BeautifierTool />} />
          <Route path="/diff" element={<DiffTool />} />
          <Route path="/text-length" element={<TextLengthTool />} />

        </Routes>
      </Layout>
    </Router>
  );
}

export default App;