import styles from "./styles.module.css";

interface IPaymentButtonsProps {
  availableMethods: {
    applePay: boolean;
    googlePay: boolean;
    amazon: boolean;
    link: boolean;
  };
}
const Image = ({ availableMethods }: IPaymentButtonsProps) => {
  if (!availableMethods) return <></>;
  if (availableMethods["applePay"]) {
    return <img src="/applepay.webp" alt="ApplePay" />;
  }
  if (availableMethods["googlePay"]) {
    return <img src="/google-pay-mark.png" alt="google" />;
  }
  if (availableMethods["amazon"]) {
    return <img src="/amazon-pay-mark.png" alt="AmazonPay" />;
  }
  if (availableMethods["link"]) {
    return <img src="/link-pay-mark.png" alt="LinkPay" />;
  }
  return <></>;
};

function PaymentButtons({ availableMethods }: IPaymentButtonsProps) {
  if (!availableMethods) return <></>;
  return (
    <div className={styles.container}>
      <Image availableMethods={availableMethods} />
    </div>
  );
}

export default PaymentButtons;
