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

export const VerificationEmail = ({ verificationUrl, companyName }) => (
  <BaseLayout
    preview={`Confirmez votre adresse courriel pour ${companyName}`}
    title="Confirmez votre adresse courriel"
    companyName={companyName}
    supportSection={true}
  >
    <Text className="text-[14px] leading-[24px] text-neutral-600 mt-[4px] mb-[24px]">
      Confirmez votre adresse courriel pour accéder à votre compte <span className="font-medium text-neutral-900">{companyName}</span>.
    </Text>

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

    <Text className="text-[12px] leading-[20px] text-neutral-400 m-0">
      Ce lien expire dans 24 heures. Si vous n'avez pas créé de compte, ignorez ce message.
    </Text>

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