import React from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

const countryCodeFormatter = new Intl.DisplayNames("en", { type: "region" });

export interface AddressInfoProps {
  name?: string;
  streetAddress: string;
  streetAddress2?: string;
  careOf?: string;
  postalCode: string;
  city: string;
  region?: string;
  countryCode: string;
}

export const AddressInfo: React.FC<AddressInfoProps> = ({
  name,
  streetAddress,
  streetAddress2,
  careOf,
  postalCode,
  city,
  region,
  countryCode,
}) => {
  return (
    <Box>
      {name != null && name !== "" ? <Typography noWrap>{name}</Typography> : null}
      {careOf != null && careOf !== "" ? <Typography noWrap>c/o {careOf}</Typography> : null}
      <Typography noWrap>{streetAddress}</Typography>
      {streetAddress2 != null && streetAddress2 !== "" ? (
        <Typography noWrap>{streetAddress2}</Typography>
      ) : null}
      <Typography noWrap>{`${postalCode} ${city}`}</Typography>
      {region != null && region !== "" ? <Typography noWrap>{region}</Typography> : null}
      {countryCode != null && countryCode !== "" ? (
        <Typography noWrap>{countryCodeFormatter.of(countryCode)}</Typography>
      ) : null}
    </Box>
  );
};