Source: pages-sections/Routeplanner-Sections/RouteCard.js

import { useState, useRef, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";

// Icons
import CloseIcon from "@material-ui/icons/Close";
// Core Components
import Card from "/components/Card/Card.js";
import CardBody from "/components/Card/CardBody.js";
import Primary from "/components/Typography/Primary.js";
import Warning from "/components/Typography/Warning.js";
import IconButton from "@material-ui/core/IconButton";

import styles from "/styles/jss/nextjs-material-kit/pages/componentsSections/typographyStyle.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";

const useStyles = makeStyles(styles);

/**
 * The RouteCard function is a React component that displays information about a route, including name,
 * distance, duration, and provides a delete button.
 * @param props - The `RouteCard` component takes in the following props:  name, distance = 0,
 * duration = 0, index, deleteHandler.
 * @returns The `RouteCard` component is being returned. It is a functional component that renders a
 * Card with information about a route. The component receives props such as `name`, `distance`,
 * `duration`, `index`, `deleteHandler`, and other props. Inside the component, it uses Material-UI
 * components like Card, GridContainer, GridItem, IconButton, and icons like CloseIcon. It displays
 */
export function RouteCard(props) {
  const {
    name,
    distance = 0,
    duration = 0,
    index,
    deleteHandler,
    ...rest
  } = props;
  const classes = useStyles();
  return (
    <Card>
      <CardBody>
        <GridContainer>
          <GridItem xs={6}>
            <h4 className={classes.cardTitle} style={{ fontWeight: "boldc" }}>
              {name}
            </h4>
          </GridItem>
          {/* {(distance || duration) && <p>To next location</p>} */}
          <GridItem xs={3}>
            {<Primary>{Math.floor(distance / 1000)}km</Primary>}
            {
              <Warning>
                {new Date(duration * 1000).toISOString().substring(11, 16)}
              </Warning>
            }
          </GridItem>
          <GridItem xs={2}>
            <IconButton
              onClick={() => {
                deleteHandler(index);
                console.log("Delete: ", index);
              }}
            >
              <CloseIcon />
            </IconButton>
          </GridItem>
        </GridContainer>
      </CardBody>
    </Card>
  );
}