import { Box, Text, Heading, useStyleConfig, chakra } from "@chakra-ui/react";
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
      animate="enter"
      initial="from"
      variants={{ enter: { scale: 1 }, from: { scale: 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;
