import React from "react";

import Card from "../../../components/Card";
import CardContent from "../../../components/Card/CardContent";
import CardHeader from "../../../components/Card/CardHeader";
import { useI18n } from "../../../contexts/I18nContext";
import { AddressInfo } from "../../bananas/components/AddressInfo";
import { PurchaseDetail } from "../types/purchase";

export interface CustomerCardProps {
  purchase: PurchaseDetail;
}

export const CustomerCard: React.FC<CustomerCardProps> = ({ purchase }) => {
  const { t } = useI18n();

  return (
    <Card size={4}>
      <CardHeader title={t("Customer")} />
      <CardContent>
        <AddressInfo
          info={{
            givenName: purchase.given_name,
            familyName: purchase.family_name,
            companyName: purchase.company_name,
            careOf: purchase.care_of,
            streetAddress: purchase.street_address,
            streetAddress2: purchase.street_address2,
            postalCode: purchase.postal_code,
            city: purchase.city,
            region: purchase.region,
            countryCode: purchase.country_code,
            email: purchase.email,
            phone: purchase.phone,
          }}
        />
      </CardContent>
    </Card>
  );
};

export default CustomerCard;