import React from 'react';

import { Colors } from '../../../theme';
import { PageWrapper, MenuButton } from '../../../components';

import { MenuButtonType } from '../../../types/components';

import UserGroupIcon from '../../../../assets/icons/user-group.svg';
import CrownIcon from '../../../../assets/icons/crown.svg';
import IDCardIcon from '../../../../assets/icons/id-card.svg';
import StreetPeopleIcon from '../../../../assets/icons/street-view.svg';
import ChartPieIcon from '../../../../assets/icons/chart-pie.svg';
import MemoriamIcon from '../../../../assets/icons/monument.svg';
import ScrollIcon from '../../../../assets/icons/scroll.svg';
import TrophyIcon from '../../../../assets/icons/trophy.svg';

const buttons: MenuButtonType[] = [
  {
    label: 'Master Ranking',
    icon: <UserGroupIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'UN Masters',
    icon: <CrownIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'LPI Ranking',
    icon: <IDCardIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'Series Ranking',
    icon: <StreetPeopleIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'Statistics',
    icon: <ChartPieIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'In Memoriam',
    icon: <MemoriamIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'In History',
    icon: <ScrollIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  },
  {
    label: 'Triumphs',
    icon: <TrophyIcon fill={Colors.DARK_BLUE} width={20} height={20} />
  }
];

const TravellersScreen = () => {
  return (
    <PageWrapper>
      {buttons.map((button) => (
        <MenuButton label={button.label} icon={button.icon} />
      ))}
    </PageWrapper>
  );
};

export default TravellersScreen;