import {
  Box,
  Text,
  Heading,
  useStyleConfig,
  chakra,
  useColorModeValue,
} from "@chakra-ui/react";
import { ease } from "@unom/style";
import { m, isValidMotionProp, motion } from "framer-motion";
import { VFC } from "react";

type CardTeamProps = {
  players: string[];
  index: number;
};

const Container = chakra(m.div, {
  shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children",
});

const CardTeam: VFC<CardTeamProps> = ({ players, index }) => {
  const headingColor = useColorModeValue("purple.600", "purple.100");

  const styles = useStyleConfig("Card", { variant: "smooth" });
  return (
    <Container
      variants={{
        enter: {
          y: 0,
          opacity: 1,
          transition: { ...ease.quint(0.8).out, staggerChildren: 0.1 },
        },
        from: { y: 100, opacity: 0 },
      }}
      __css={styles}
    >
      <Heading fontFamily="Gilroy" color={headingColor} size="md" as="h4">
        Team {index + 1}
      </Heading>
      {players.map((player, index) => (
        <Text
          as={motion.p}
          variants={{
            enter: { y: 0, opacity: 1, transition: ease.quint(0.8).out },
            from: { y: 30, opacity: 0 },
          }}
          fontSize="lg"
          fontWeight={500}
          key={index}
        >
          {player}
        </Text>
      ))}
    </Container>
  );
};

export default CardTeam;
