import React from 'react';
import mpBlackLogo from '../assets/img/masterpass-black-logo.png';
import type { MasterpassRestOptionTexts } from '../types/custom-render.types';

interface MasterpassSecurityInfoProps {
  texts: MasterpassRestOptionTexts;
}

const MasterpassSecurityInfo: React.FC<MasterpassSecurityInfoProps> = ({
  texts
}) => {
  return (
    <div className="flex flex-col items-center gap-2">
      <img src={mpBlackLogo.src} alt="Masterpass" className="h-6" />
      <p className="text-xs text-center text-[#9d9d9d]">
        {texts.masterpassSecurityPrefix}{' '}
        <a
          href="https://www.mastercard.com.tr/tr-tr/tuketiciler/odeme-secenekleri/masterpass.html"
          target="_blank"
          rel="noopener noreferrer"
          className="text-[#000000] underline hover:text-[#181818] font-medium"
        >
          {texts.masterpassSecurityLink}
        </a>
        {texts.masterpassSecuritySuffix}
      </p>
    </div>
  );
};

export default MasterpassSecurityInfo;