import { ReactElement } from 'react';

import { HStack } from '@chakra-ui/react';
import { LuCloudMoon, LuCrown } from 'react-icons/lu';
import { MdVideoFile } from 'react-icons/md';
import { useNavigate } from 'react-router-dom';

import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar';
import { Vignette } from '@/components/Vignette';

type HomeListType = {
  id: number;
  name: string;
  icon: ReactElement;
  to: string;
};
const homeList: HomeListType[] = [
  {
    id: 1,
    name: 'Types',
    icon: <LuCrown style={{ width: '100px', height: '100px' }} />,
    to: '/Type',
  },
  {
    id: 2,
    name: 'Univers',
    icon: <LuCloudMoon style={{ width: '100px', height: '100px' }} />,
    to: '/Series',
  },
  {
    id: 4,
    name: 'Medias',
    icon: <MdVideoFile style={{ width: '100px', height: '100px' }} />,
    to: '/Media',
  },
];

export const HomePage = () => {
  const navigate = useNavigate();
  const onSelectItem = (data: HomeListType) => {
    navigate(data.to);
  };
  return (
    <>
      <TopBar title="Home" />
      <PageLayout>
        <HStack
          wrap="wrap"
          gap="20px"
          marginX="auto"
          padding="20px"
          justify="center"
        >
          {homeList.map((data) => (
            <Vignette
              key={data.id}
              onClick={() => onSelectItem(data)}
              text={data.name}
              icon={data.icon}
            />
          ))}
        </HStack>
      </PageLayout>
    </>
  );
};
