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

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

// Icons
import CloseIcon from "@material-ui/icons/Close";
import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import Icon from "@material-ui/core/Icon";
// Core Components
import CardFooter from "/components/Card/CardFooter.js";
import Card from "/components/Card/Card.js";
import CardMedia from "@material-ui/core/CardMedia";
import CardBody from "/components/Card/CardBody.js";
import Primary from "/components/Typography/Primary.js";
import Warning from "/components/Typography/Warning.js";
import Button from "/components/CustomButtons/Button.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 WaypointCard function is a React component that displays information about a waypoint, including
 * name, distance, duration, and options for deleting or swapping the waypoint.
 * @param props - The `WaypointCard` component takes in the following props:
 * @returns The code snippet is a React functional component named `WaypointCard` that returns a Card
 * component with various elements inside it. The component takes in props such as `name`, `distance`,
 * `duration`, `index`, `deleteHandler`, `length`, `swapHandler`, and any other additional props using
 * the spread operator.
 */
export function WaypointCard(props) {
  const {
    name,
    distance = 0,
    duration = 0,
    index,
    deleteHandler,
    length,
    swapHandler,
    ...rest
  } = props;
  const classes = useStyles();
  return (
    <Card>
      <CardBody>
        <GridContainer>
          <GridItem xs={6}>
            {index == 0 && (
              <h4 className={classes.cardTitle} style={{ fontWeight: "bold" }}>
                {name}
              </h4>
            )}
            {index != 0 && (
              <h4 className={classes.cardTitle} style={{ fontWeight: "boldc" }}>
                {name}
              </h4>
            )}
          </GridItem>
          {/* {(distance || duration) && <p>To next location</p>} */}
          <GridItem xs={3}>
            {<Primary>{distance || "-"}</Primary>}
            {<Warning>{duration || "-"}</Warning>}
          </GridItem>
          <GridItem xs={2}>
            <IconButton
              onClick={() => {
                deleteHandler(index);
                console.log("Delete: ", index);
              }}
            >
              <CloseIcon />
            </IconButton>
          </GridItem>
          <GridItem xs={1}>
            {index == 0 && (
              <a>
                <Icon />
              </a>
            )}
            {index != 0 && (
              <a
                onClick={() => {
                  swapHandler(index, 0);
                }}
              >
                <ArrowDropUpIcon />
              </a>
            )}
            {index >= length - 1 && (
              <a>
                <Icon />
              </a>
            )}
            {index < length - 1 && (
              <a
                onClick={() => {
                  swapHandler(index, 1);
                }}
              >
                <ArrowDropDownIcon />
              </a>
            )}
          </GridItem>
        </GridContainer>
      </CardBody>
    </Card>
  );
}