import { Button, Section, Text, Link } from "@react-email/components";
import { BaseLayout } from "@zen/core/email/templates";

export const EmailChangeConfirmEmail = ({ confirmUrl, newEmail, companyName }) => (
  <BaseLayout
    preview={`Confirmez votre nouvelle adresse courriel – ${companyName}`}
    title="Confirmez votre nouvelle adresse courriel"
    companyName={companyName}
    supportSection={true}
  >
    <Text className="text-[14px] leading-[24px] text-neutral-600 mt-[4px] mb-[24px]">
      Une demande de modification d'adresse courriel a été effectuée sur votre compte{' '}
      <span className="font-medium text-neutral-900">{companyName}</span>. Cliquez sur le bouton ci-dessous pour confirmer votre nouvelle adresse.
    </Text>

    <Section style={{ border: '1px solid #E5E5E5' }} className="bg-neutral-100 rounded-[12px] p-[20px] my-[24px]">
      <Text className="text-[12px] font-medium text-neutral-400 m-0 mb-[4px] uppercase tracking-wider">
        Nouvelle adresse
      </Text>
      <Text className="text-[14px] font-medium text-neutral-900 m-0">
        {newEmail}
      </Text>
    </Section>

    <Section className="mt-[28px] mb-[32px]">
      <Button
        href={confirmUrl}
        className="bg-neutral-900 rounded-[8px] text-white font-medium px-[20px] py-[11px] no-underline text-[13px]"
      >
        Confirmer mon adresse courriel
      </Button>
    </Section>

    <Text className="text-[12px] leading-[20px] text-neutral-400 m-0">
      Ce lien expire dans 24 heures. Si vous n'êtes pas à l'origine de cette demande, ignorez ce message. Votre adresse actuelle reste inchangée.
    </Text>

    <Text className="text-[12px] leading-[20px] text-neutral-400 m-0 mt-[8px]">
      Lien :{' '}
      <Link href={confirmUrl} className="text-neutral-400 underline break-all">
        {confirmUrl}
      </Link>
    </Text>
  </BaseLayout>
);