import { Button, Heading, Row, Section, Text } from "@react-email/components";
import Base from "./base";
export type VerificaEmail_NewMail = {
  mailType: "verificaEmail";
  props: VerificaEmailProps;
};

type VerificaEmailProps = {
  token: string;
  userId: string;
  redirect?: string;
};

const VerificaEmail = ({ token, userId, redirect }: VerificaEmailProps) => {
  return (
    <Base preview="Verifica la tua email" noreply>
      <>
        <Heading className="text-center text-3xl leading-8">
          Verifica la tua email
        </Heading>
        <Section className="px-4 text-center text-base md:px-12">
          <Row>
            <Text>
              Clicca sul pulsante qui sotto per verificare la tua email.
            </Text>
          </Row>

          <Button
            className="mx-auto box-border inline-flex h-10 items-center justify-center rounded-md bg-neutral-100 px-4 py-2 text-center align-middle font-semibold whitespace-nowrap text-neutral-900"
            href={`${process.env.NEXT_PUBLIC_BASE_URL}/auth/verifica-email-action?t=${token}&u=${userId}${redirect ? `&r=${redirect}` : ""}`}
          >
            Clicca qui per verificare
          </Button>
        </Section>
      </>
    </Base>
  );
};

export default VerificaEmail;