import {
  Card,
  CardFooter,
  Code,
  Container,
  Divider,
  Heading,
  Image,
  Stack,
  Text,
} from "@chakra-ui/react";
import team from "../../data/team.json";

export function meta() {
  return [
    {
      title: "Our Team - Car Crushers",
    },
  ];
}

export default function () {
  return (
    <Container maxW="container.xl" pt="4vh">
      <Heading textAlign="start">Our Team</Heading>
      <br />
      <Text textAlign="start">
        Please respect our staff, and <u>do not send direct messages</u> or
        friend requests in place of official channels.
      </Text>
      <br />
      <div
        style={{
          display: "grid",
          gap: "1rem",
          gridTemplateColumns: "repeat(auto-fill, minmax(16rem, 1fr))",
          width: "100%",
        }}
      >
        {team.map((member) => (
          <Card borderRadius="36px" key={member.id} maxW="xs" p="12px">
            <Image
              alt={member.tag + "'s avatar"}
              borderRadius="50%"
              src={`/files/avatars/${member.id}.webp`}
            />
            <Stack mb="8" mt="6" spacing="3">
              <b>
                <Heading size="md">{member.tag}</Heading>
              </b>
              <Text>{member.position}</Text>
            </Stack>
            <Divider />
            <CardFooter justifyContent="center">
              <Code>ID: {member.id}</Code>
            </CardFooter>
          </Card>
        ))}
      </div>
    </Container>
  );
}