import { useLocalization } from '@akinon/next/hooks';
import { Icon } from '@theme/components';
import { Image } from '@akinon/next/components/image';

const TrustBadges = () => {
  const { t } = useLocalization();

  return (
    <div className="mt-6 flex flex-col gap-3 px-2 sm:flex-row sm:items-center sm:justify-between">
      <div className="flex items-center gap-2 text-xs text-gray-600">
        <Icon name="info" size={14} className="fill-gray-500" aria-hidden="true" />
        <span>{t('checkout.one_page.trust.secure_note')}</span>
      </div>
      <div className="flex items-center gap-2 opacity-70" aria-hidden="true">
        <Image src="/visa.png" alt="Visa" width={36} height={12} />
        <Image src="/mastercard.png" alt="Mastercard" width={20} height={12} />
        <Image src="/vbv.png" alt="Verified by Visa" width={26} height={12} />
        <Image
          src="/mastersecure.png"
          alt="Mastercard Secure"
          width={32}
          height={12}
        />
        <Image src="/ssl-secure.png" alt="SSL Secure" width={12} height={12} />
      </div>
    </div>
  );
};

export default TrustBadges;