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

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

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

const CardTeam: VFC<CardTeamProps> = ({ players, index }) => {
  const styles = useStyleConfig("Card", { variant: "smooth" });
  return (
    <Container
      variants={{
        enter: {
          y: 0,
          opacity: 1,
          transition: ease.quint(0.8).out,
        },
        from: { y: 100, opacity: 0 },
      }}
      __css={styles}
    >
      <Heading size="md" as="h3">
        Team {index + 1}
      </Heading>
      {players.map((player, index) => (
        <Text fontWeight={500} key={index}>
          {player}
        </Text>
      ))}
    </Container>
  );
};

export default CardTeam;
