import React from "react";

import NoResultsImgBilling from "../../../../../../../assets/images/img-my-info-billing@3x.png";
import NoResultsImgCoupon from "../../../../../../../assets/images/img-myinfo-coupon@3x.png";
import NoResultsImgPayment from "../../../../../../../assets/images/img-myinfo-payment@3x.png";
import NoResultsImgShipping from "../../../../../../../assets/images/img-myinfo-shipping@3x.png";
import { $L } from "../../../../../../utils/helperMethods";
import css from "./MyInfoNoResults.module.less";

const NO_RESULTS_IMAGE = {
  PAYMENT: NoResultsImgPayment,
  "BILLING ADDRESS": NoResultsImgBilling,
  "SHIPPING ADDRESS": NoResultsImgShipping,
  COUPON: NoResultsImgCoupon,
};

export default function MyInfoNoResults({ type }) {
  const ariaLabel =
    type === "PAYMENT"
      ? "There are no registered Payment method."
      : type === "BILLING ADDRESS" || type === "SHIPPING ADDRESS"
      ? "There are no registered address."
      : type === "COUPON"
      ? "There are no registered coupons."
      : "";

  return (
    <div className={css.container}>
      <img src={NO_RESULTS_IMAGE[type]} alt="No Results" />
      <p>
        {type === "PAYMENT"
          ? $L("No payment methods added.")
          : type === "BILLING ADDRESS" || type === "SHIPPING ADDRESS"
          ? $L("No addresses added.")
          : type === "COUPON"
          ? $L("No coupons available")
          : ""}
      </p>
    </div>
  );
}
