text: import React from "react";
  import { Badge, Box, Image, SimpleGrid, Text, Flex } from "@chakra-ui/core";
  import { format as timeAgo } from "timeago.js";
  import { Link } from "react-router-dom";
  import { useSpaceXPaginated } from "../utils/use-space-x";
  import { formatDate } from "../utils/format-date";
  import Error from "../components/error";
  import Breadcrumbs from "../components/breadcrumbs";
  import LoadMoreButton from "../components/load-more-button";
  import { ToggleFavoriteButton } from "../components/toggle-favorite-item-button";
  import { ItemTypeEnum } from "../types";
  
  
  const PAGE_SIZE = 12;
  
  export default function Launches() {
    const { data, error, isValidating, setSize, size } = useSpaceXPaginated(
      "/launches/past",
      {
        limit: PAGE_SIZE,
        order: "desc",
        sort: "launch_date_utc",
      }
    );
  
    return (
      <div>
        <Breadcrumbs
          items={[{ label: "Home", to: "/" }, { label: "Launches" }]}
        />
        <SimpleGrid
          m={[2, null, 6]}
          minChildWidth="350px"
          spacing="4"
        >
          {error && <Error />}
          {data &&
          data
            .flat()
            .map((launch) => (
              <LaunchItem
                launch={launch}
                key={launch.flight_number}
              />
            ))}
        </SimpleGrid>
        <LoadMoreButton
          loadMore={() => setSize(size + 1)}
          data={data}
          pageSize={PAGE_SIZE}
          isLoadingMore={isValidating}
        />
      </div>
    );
  }
  
  export function LaunchItem({ launch }) {
    return (
      <Box
        as={Link}
        to={`/launches/${launch.flight_number.toString()}`}
        boxShadow="md"
        borderWidth="1px"
        rounded="lg"
        overflow="hidden"
        position="relative"
      >
        <Image
          src={
            launch.links.flickr_images[0]?.replace("_o.jpg", "_z.jpg") ??
            launch.links.mission_patch_small
          }
          alt={`${launch.mission_name} launch`}
          height={["200px", null, "300px"]}
          width="100%"
          objectFit="cover"
          objectPosition="bottom"
        />
  
        <Image
          position="absolute"
          top="5"
          right="5"
          src={launch.links.mission_patch_small}
          height="75px"
          objectFit="contain"
          objectPosition="bottom"
        />
  
  
        <Box p="6">
          <Box
            d="flex"
            justifyContent="space-between"
            alignItems="baseline"
          >
            <Box
              d="flex"
              alignItems="baseline"
            >
              {launch.launch_success ? (
                <Badge
                  px="2"
                  variant="solid"
                  variantColor="green"
                >
                  Successful
                </Badge>
              ) : (
                <Badge
                  px="2"
                  variant="solid"
                  variantColor="red"
                >
                  Failed
                </Badge>
              )}
              <Box
                color="gray.500"
                fontWeight="semibold"
                letterSpacing="wide"
                fontSize="xs"
                textTransform="uppercase"
                ml="2"
              >
                {launch.rocket.rocket_name} &bull; {launch.launch_site.site_name}
              </Box>
            </Box>
  
            <ToggleFavoriteButton
              item={launch}
              toggleItemType={ItemTypeEnum.Launch}
              preventDefault
            />
          </Box>
  
          <Box
            mt="1"
            fontWeight="semibold"
            as="h4"
            lineHeight="tight"
            isTruncated
          >
            {launch.mission_name}
          </Box>
          <Flex>
            <Text fontSize="sm">{formatDate(launch.launch_date_utc)} </Text>
            <Text
              color="gray.500"
              ml="2"
              fontSize="sm"
            >
              {timeAgo(launch.launch_date_utc)}
            </Text>
          </Flex>
        </Box>
      </Box>
    );
  }
  