import React from "react";

import Link from "@mui/material/Link";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";

import Card from "../../../components/Card";
import CardContent from "../../../components/Card/CardContent";
import CardHeader from "../../../components/Card/CardHeader";
import { useI18n } from "../../../contexts/I18nContext";
import { Shipment } from "../types/shipment";

export interface ShipmentCardProps {
  shipment: Shipment;
}

export const ShipmentCard: React.FC<ShipmentCardProps> = ({ shipment }) => {
  const { t } = useI18n();
  return (
    <Card sx={{ width: "100%" }}>
      <CardHeader title={t("Shipment")} />
      <CardContent sx={{ pt: 0 }}>
        <List dense disablePadding>
          <ListItem disablePadding>
            <ListItemText primary="Carrier" secondary={shipment.carrier} />
          </ListItem>
          <ListItem disablePadding>
            <ListItemText
              primary={t("Tracking number")}
              secondary={shipment.tracking_number !== "" ? shipment.tracking_number : "Unavailable"}
            />
          </ListItem>
          <ListItem disablePadding>
            <ListItemText
              primary={t("Tracking URL")}
              secondary={
                shipment.tracking_url !== "" ? (
                  <Link href={shipment.tracking_url}>{shipment.tracking_url}</Link>
                ) : (
                  t("Unavailable")
                )
              }
            />
          </ListItem>
          <ListItem disablePadding>
            <ListItemText
              primary={t("Date sent")}
              secondary={
                shipment.date_sent != null && shipment.date_sent !== ""
                  ? new Date(shipment.date_sent).toLocaleString()
                  : t("Not shipped yet")
              }
            />
          </ListItem>
        </List>
      </CardContent>
    </Card>
  );
};

export default ShipmentCard;