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

export const InvitationEmail = ({ setupUrl, companyName }) => (
  <BaseLayout
    preview={`Terminez la création de votre compte ${companyName}`}
    title="Créez votre mot de passe"
    companyName={companyName}
    supportSection={true}
  >
    <Text className="text-[14px] leading-[24px] text-neutral-600 mt-[4px] mb-[24px]">
      Un administrateur a créé un compte pour vous sur <span className="font-medium text-neutral-900">{companyName}</span>. Cliquez sur le bouton ci-dessous pour choisir votre mot de passe et accéder à votre compte.
    </Text>

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

    <Text className="text-[12px] leading-[20px] text-neutral-400 m-0">
      Ce lien expire dans 48 heures. Si vous n'attendiez pas cette invitation, ignorez ce message.
    </Text>

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