import React, { memo } from "react";

import Spottable from "@enact/spotlight/Spottable";

import css from "./BillingAddressItem.module.less";

const ItemContainer = Spottable("div");

export default memo(function BillingAddressItem({
  bilOdrFnm,
  bilOdrLnm,
  bilZpcd,
  bilStatNm,
  bilCityNm,
  bilDtlAddr,
  bilCtpt,
  bilEmalAddr,
  index,
  length,
  ...rest
}) {
  const ariaLabel =
    bilOdrFnm +
    bilOdrLnm +
    ", " +
    bilDtlAddr +
    bilCityNm +
    bilStatNm +
    ", phone number " +
    bilCtpt +
    "," +
    (index * 1 + 1) +
    " of " +
    length;
  return (
    <ItemContainer
      className={css.itemContainer}
      aria-label={ariaLabel}
      {...rest}
    >
      <h2 className={css.title}>
        {bilOdrFnm} {bilOdrLnm}
      </h2>
      <div className={css.addressWrap}>
        <p>
          {bilZpcd} {bilStatNm}, <br />
          {bilCityNm} <br />
          {bilDtlAddr}
        </p>
      </div>
      <div className={css.cardFooter}>
        <p className={css.callNumber}>
          <span />
          {bilCtpt.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`)}
        </p>
        <p className={css.email}>
          <span />
          {bilEmalAddr}
        </p>
      </div>
    </ItemContainer>
  );
});
