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

export const PasswordResetEmail = ({ resetUrl, companyName }) => (
  <BaseLayout
    preview={`Réinitialisez votre mot de passe pour ${companyName}`}
    title="Réinitialisation du mot de passe"
    companyName={companyName}
    supportSection={true}
  >
    <Text className="text-[14px] leading-[24px] text-neutral-600 mt-[4px] mb-[24px]">
      Une demande de réinitialisation du mot de passe a été reçue pour le compte <span className="font-medium text-neutral-900">{companyName}</span>. Cliquez sur le bouton pour en choisir un nouveau.
    </Text>

    <Section className="mt-[28px] mb-[32px]">
      <Button
        href={resetUrl}
        className="bg-neutral-900 rounded-[8px] text-white font-medium px-[20px] py-[11px] no-underline text-[13px]"
      >
        Réinitialiser le mot de passe
      </Button>
    </Section>

    <Text className="text-[12px] leading-[20px] text-neutral-400 m-0">
      Ce lien expire dans 1 heure. Si vous n'êtes pas à l'origine de cette demande, ignorez ce message. Votre mot de passe ne sera pas modifié.
    </Text>

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