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

export function meta() {
  return [
    {
      title: "For Hiring Teams - Car Crushers",
    },
    {
      name: "robots",
      content: "noindex",
    },
  ];
}

export default function () {
  return (
    <Container maxW="container.xl">
      <Heading textAlign="start">About Evan</Heading>
      <br />
      <Text textAlign="start">
        Hello! Thank you for your interest in me as a candidate. Are you
        wondering if I did all those things I mentioned on my resume? If so,
        yes, I did. Below is a list of some things I have worked on during my
        time here, some of them more strongly related than others. Thank you for
        taking the time to look at a history of my past and current work.
      </Text>
      <br />
      <div
        style={{
          display: "grid",
          gap: "1rem",
          gridTemplateColumns: "repeat(auto-fill, minmax(16rem, 1fr))",
          justifyItems: "center",
        }}
      >
        {projects.map((project) => (
          <Card borderRadius="36px" key={project.name} p="12px" w="100%">
            <Image
              alt={`Logo for ${project.name}`}
              borderRadius="36px"
              src={`/files/${project.image}`}
            />
            <Stack mb="8" mt="6" spacing="3">
              <b>
                <Heading size="md">
                  {project.name} ({project.timespan})
                </Heading>
              </b>
              <Text>Time Span: {project.timespan}</Text>
              <br />
              <Text>{project.description}</Text>
            </Stack>
            <Divider />
            <CardFooter gap="16px" justifyContent="center">
              {project.work_link ? (
                <Link href={project.work_link}>Project Work</Link>
              ) : null}
              {project.landing_link ? (
                <Link href={project.landing_link}>Project Home Page</Link>
              ) : null}
            </CardFooter>
          </Card>
        ))}
      </div>
    </Container>
  );
}