import {BrowserRouter, Route, Routes, Navigate} from 'react-router-dom';
import {ProtectedRoute} from 'components';
import {LoginForm} from 'views';
import Header from 'components/ui/header';
import {lazy, Suspense} from 'react';

const ChannelList = lazy(() => import('views/ChannelList').then(module => ({default: module.ChannelList})));
const ChannelDetail = lazy(() => import('views/ChannelDetail').then(module => ({default: module.ChannelDetail})));

export default function Router() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        {/* Public routes */}
        <Route path="/login" element={<Suspense fallback={null}><LoginForm /></Suspense>} />

        {/* Protected routes */}
        <Route path="/" element={<Navigate to="/channels" replace />} />
        <Route path="/channels" element={<Suspense fallback={null}><ProtectedRoute component={<ChannelList />} /></Suspense>} />
        <Route path="/channels/:channelId" element={<Suspense fallback={null}><ProtectedRoute component={<ChannelDetail />} /></Suspense>} />
        {/* Fallback route */}
        <Route path="*" element={<Navigate to="/login" replace />} />
      </Routes>
    </BrowserRouter>
  );
}
