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 { Star } from "react-feather";
  import { useSelector } from "react-redux";
  import { selectFavorites } from "../redux/selectors/favorites.selector";
  
  import { useSpaceXPaginated } from "../utils/use-space-x";
  import { formatDate } from "../utils/format-date";
  import Error from "./error";
  import Breadcrumbs from "./breadcrumbs";
  import LoadMoreButton from "./load-more-button";
  
  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",
          }
      );
      console.log(data, error);
      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 }) {
      const favorites = useSelector(selectFavorites);
      const isInFavoritesLaunch = favorites.favoriteLaunches.find(
          (item) => item.flight_number === launch.flight_number
      );
      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">
                  <Flex align="center" justify="flex-end">
                      <Badge px="2" variantColor="yellow">
                          <Star
                              width="3em"
                              color={isInFavoritesLaunch ? "orange" : "black"}
                          />
                      </Badge>
                  </Flex>
                  <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>
  
                  <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>
      );
  }
  