import type React from 'react';
import { Route, Routes, useParams } from 'react-router-dom';
import DataDetail from '../data-detail/DataDetail';
import DataViewer from '../data-viewer/DataViewer';
import NotFound from '../not-found/NotFound';
import styles from './Data.module.css';
import DataUtils from './DataUtils';

const Data: React.FC = () => {
  const { name } = useParams<'name'>();
  if (typeof name === 'undefined' || !DataUtils.exists(name)) {
    return <NotFound />;
  }
  return (
    <div className={styles.data}>
      <Routes>
        <Route index element={<DataDetail name={name} />} />
        <Route path="viewer" element={<DataViewer name={name} />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
};

export default Data;
