export default function Example() {
  const items = new Array(6).fill("");
  return (
    <Box
      css={{
        paddingBlockStart: "$150",
        paddingInline: "$100",
        width: "100vw",
      }}
    >
      <Carousel.Root itemsPerPage={1}>
        <Carousel.Header>
          <Carousel.HeaderContent>
            <Carousel.Title css={{ fontFamily: "$meta" }}>
              Carousel Title
            </Carousel.Title>
          </Carousel.HeaderContent>
        </Carousel.Header>
        <Carousel.Content>
          {items.map((item, i) => (
            <Carousel.Item key={item}>
              <Card
                key={"item" + i}
                css={{
                  width: "300px",
                  marginBlockEnd: "$025",
                  marginInlineEnd: "$100",
                  padding: "$100",
                  boxShadow: "$200",
                }}
              >
                <Box
                  css={{
                    backgroundImage:
                      "url('/img/components/carousel/image-story-card.png')",
                    display: "flex",
                    alignItems: "flex-end",
                    height: "179px",
                    marginBlockEnd: "$050",
                    padding: "$100",
                  }}
                />
                <Box
                  as="p"
                  css={{
                    fontWeight: "bold",
                    fontSize: "$075",
                    marginBlockStart: 0,
                    marginBlockEnd: "$025",
                  }}
                >
                  Kicker
                </Box>
                <Box
                  as="h2"
                  css={{
                    fontSize: "$150",
                    fontFamily: "$headline",
                    marginBlockStart: 0,
                    marginBlockEnd: "$050",
                  }}
                >
                  Here&rsquo;s a headline wrapping to two lines
                </Box>
                <Box as="p" css={{ color: "$accessible", fontSize: "$087" }}>
                  Here&rsquo;s some text for the blurb of this piece,
                  summarizing in a few words what the article is about to
                  provide more context for the reader.
                </Box>
                <Box
                  as="a"
                  href="#"
                  css={{
                    color: "$accessible",
                    fontSize: "$087",
                    textDecoration: "none",
                  }}
                >
                  By The Washington Post
                </Box>
              </Card>
            </Carousel.Item>
          ))}
        </Carousel.Content>
        <Carousel.Footer css={{ position: "relative" }}>
          <Carousel.Dots />
          <Box
            css={{
              display: "flex",
              gap: "$025",
              position: "absolute",
              right: 0,
            }}
          >
            <Carousel.PreviousButton />
            <Carousel.NextButton />
          </Box>
        </Carousel.Footer>
      </Carousel.Root>
    </Box>
  );
}