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 { Recipient } from "../types/recipient";

import { AddressInfo } from "./AddressInfo";

interface RecipientCard {
  recipient: Recipient;
  email?: string;
  phone?: string;
}

export const RecipientCard: React.FC<RecipientCard> = ({ recipient, email, phone }) => {
  const { t } = useI18n();
  return (
    <Card>
      <CardHeader title={t("Recipient")} />
      <CardContent sx={{ pt: 0 }}>
        <List dense disablePadding>
          <ListItem disablePadding>
            <ListItemText
              primary={t("Address")}
              secondary={
                <AddressInfo
                  careOf={recipient.care_of}
                  city={recipient.city}
                  countryCode={recipient.country_code}
                  name={
                    recipient.company_name
                      ? recipient.company_name
                      : `${recipient.given_name} ${recipient.family_name}`
                  }
                  postalCode={recipient.postal_code}
                  region={recipient.region}
                  streetAddress={recipient.street_address}
                  streetAddress2={recipient.street_address2}
                />
              }
            />
          </ListItem>
          <ListItem disablePadding>
            <ListItemText primary={t("Email")} secondary={email ?? "—"} />
          </ListItem>
          <ListItem disablePadding>
            <ListItemText primary={t("Phone")} secondary={phone ?? "—"} />
          </ListItem>
        </List>
      </CardContent>
    </Card>
  );
};

export default RecipientCard;