import React from "react";

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 { OrderDetail } from "../../types/order";
import { AddressInfo } from "../AddressInfo";

import OrderDestinationChip from "./OrderDestinationChip";

interface OrderDestinationCard {
  order: OrderDetail;
}

export const OrderDestinationCard: React.FC<OrderDestinationCard> = ({ order }) => {
  const { t } = useI18n();

  return (
    <Card>
      <CardHeader title={t("Delivery")}>
        <OrderDestinationChip element={order} />
      </CardHeader>

      <CardContent sx={{ pt: 0 }}>
        <List dense disablePadding>
          <ListItem disablePadding>
            <ListItemText
              primary={t("Address")}
              secondary={
                <AddressInfo
                  careOf={order.care_of}
                  city={order.city}
                  countryCode={order.country_code}
                  name={order.name}
                  postalCode={order.postal_code}
                  region={order.region}
                  streetAddress={order.street_address}
                  streetAddress2={order.street_address2}
                />
              }
            />
          </ListItem>
        </List>
      </CardContent>
    </Card>
  );
};

export default OrderDestinationCard;