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

export const PasswordChangedEmail = ({ email, companyName }) => (
  <BaseLayout
    preview={`Votre mot de passe a été modifié – ${companyName}`}
    title="Mot de passe modifié"
    companyName={companyName}
    supportSection={true}
  >
    <Text className="text-[14px] leading-[24px] text-neutral-600 mt-[4px] mb-[24px]">
      Le mot de passe associé au compte <span className="font-medium text-neutral-900">{companyName}</span> a été modifié.
    </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">
        Compte
      </Text>
      <Text className="text-[14px] font-medium text-neutral-900 m-0">
        {email}
      </Text>
    </Section>

    <Text className="text-[12px] leading-[20px] text-neutral-400 m-0">
      Si vous n'êtes pas à l'origine de cette modification, contactez le support immédiatement.
    </Text>
  </BaseLayout>
);