import {
  Grid,
  Heading,
  Text,
  useColorModeValue,
  useToken,
} from "@chakra-ui/react";
import { motion } from "framer-motion";
import SectionTeamGenerator from "Sections/TeamGenerator";

const Home = () => {
  const colorMain = useToken("colors", "main");

  return (
    <Grid gap={4}>
      <Heading
        color="transparent"
        lineHeight="1"
        style={
          {
            TextStroke: `1px ${colorMain}`,
            WebkitTextStroke: `1px ${colorMain}`,
          } as any
        }
        opacity="0.5"
        mb="2rem"
        fontSize="5xl"
        as={motion.h1}
      >
        Random Team Generator
      </Heading>
      <SectionTeamGenerator />
    </Grid>
  );
};

export default Home;
