import { createBrowserRouter } from 'react-router-dom';
import { Home } from './pages/home';
import { FormFieldTextPage } from './pages/form-field-text';
import { ButtonsPage } from './pages/buttons';
import { DemoPage } from './pages/demo';
import { DropdownPage } from './pages/dropdown';
import { GridPage } from './pages/grid';
import { SnackbarPage } from './pages/snackbar';
import { SymbolActionPage } from './pages/symbol-action';
import { TextPage } from './pages/text';
import { StickersPage } from './pages/sticker';
import { TypographyIconsPage } from './pages/typography-icons';
import { IconsPage } from './pages/icons';
import { SplitterPage } from './pages/splitter';
import { PopoverPage } from './pages/popover';
import { AvatarPage } from './pages/avatar';
import { CheckboxPage } from './pages/checkbox';
import { RadioPage } from './pages/radio';
import { ComboboxPage } from './pages/combobox';
import { SlidePanelPage } from './pages/slide-panel';
import { SegmentControlPage } from './pages/segment-control';
import { TooltipPage } from './pages/tooltip';
import { CursorTooltipPage } from './pages/cursor-tooltip';
import { LoaderPage } from './pages/loader';
import { SpinnerPage } from './pages/spinner';
import { TextareaPage } from './pages/textarea';
import { AnimateIconsPage } from './pages/animate-icons';
import { FormFieldSelectPage } from './pages/form-field-select';
import { FormFieldDatePickerPage } from './pages/form-field-date-picker';
import { FormFieldNumberPage } from './pages/form-field-number';
import { TogglePage } from './pages/toggle';
import { ChipsPage } from './pages/chips';
import { ItemPage } from './pages/item';
import { ListPage } from './pages/list';
import { TagPage } from './pages/tag';

export const routes = [
  {
    id: 'Home',
    path: '/',
    element: <Home />,
  },
  {
    id: 'Avatar',
    path: '/avatar',
    element: <AvatarPage />,
  },
  {
    id: 'FormFieldText',
    path: '/form-field-text',
    element: <FormFieldTextPage />,
  },
  {
    id: 'FormFieldNumber',
    path: '/form-field-number',
    element: <FormFieldNumberPage />,
  },
  {
    id: 'FormFieldSelect',
    path: '/form-field-select',
    element: <FormFieldSelectPage />,
  },
  {
    id: 'FormFieldDatePicker',
    path: '/form-field-date-picker',
    element: <FormFieldDatePickerPage />,
  },
  {
    id: 'Textarea',
    path: '/textarea',
    element: <TextareaPage />,
  },
  {
    id: 'Buttons',
    path: '/buttons',
    element: <ButtonsPage />,
  },
  {
    id: 'Demo',
    path: '/demo',
    element: <DemoPage />,
  },
  {
    id: 'Dropdown',
    path: '/dropdown',
    element: <DropdownPage />,
  },
  {
    id: 'Radio',
    path: '/radio',
    element: <RadioPage />,
  },
  {
    id: 'Snackbar',
    path: '/snackbar',
    element: <SnackbarPage />,
  },
  {
    id: 'Grid',
    path: '/grid',
    element: <GridPage />,
  },
  {
    id: 'Symbol Action',
    path: '/symbol-action',
    element: <SymbolActionPage />,
  },
  {
    id: 'Sticker',
    path: '/sticker',
    element: <StickersPage />,
  },
  {
    id: 'Text',
    path: '/text',
    element: <TextPage />,
  },
  {
    id: 'Typography Icons',
    path: '/typography-icons',
    element: <TypographyIconsPage />,
  },
  {
    id: 'Icons',
    path: '/icons',
    element: <IconsPage />,
  },
  { id: 'Splitter', path: '/splitter', element: <SplitterPage /> },
  {
    id: 'Popover',
    path: '/popover',
    element: <PopoverPage />,
  },
  {
    id: 'Checkbox',
    path: '/checkbox',
    element: <CheckboxPage />,
  },
  {
    id: 'Toggle',
    path: '/Toggle',
    element: <TogglePage />,
  },
  {
    id: 'Combobox',
    path: '/combobox',
    element: <ComboboxPage />,
  },
  {
    id: 'Chips',
    path: '/chips',
    element: <ChipsPage />,
  },
  {
    id: 'Tag',
    path: '/tag',
    element: <TagPage />,
  },
  { id: 'Slide Panel', path: '/slide-panel', element: <SlidePanelPage /> },
  {
    id: 'Segment Control',
    path: '/segment-control',
    element: <SegmentControlPage />,
  },
  {
    id: 'Loader',
    path: '/loader',
    element: <LoaderPage />,
  },
  {
    id: 'Spinner',
    path: '/spinner',
    element: <SpinnerPage />,
  },
  {
    id: 'Tooltip',
    path: '/tooltip',
    element: <TooltipPage />,
  },
  {
    id: 'CursorTooltip',
    path: '/cursor-tooltip',
    element: <CursorTooltipPage />,
  },
  {
    id: 'Animate Icons',
    path: '/animate-icons',
    element: <AnimateIconsPage />,
  },
  {
    id: 'Item',
    path: '/item',
    element: <ItemPage />,
  },
  {
    id: 'List',
    path: '/list',
    element: <ListPage />,
  },
];

export const router = createBrowserRouter(routes);