import { Button, Heading, Row, Section, Text } from "@react-email/components";
import z from "zod";
import { env } from "~/env";
import Base from "./base";

export const VerificaEmailMailTag = "verificaEmail";
export const VerificaEmailPropsSchema = z.object({
	token: z.string(),
	userId: z.string(),
	redirect: z.string().optional(),
});

const VerificaEmail = ({
	token,
	userId,
	redirect,
}: z.infer<typeof VerificaEmailPropsSchema>) => {
	return (
		<Base noreply preview="Verifica la tua email">
			<>
				<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 whitespace-nowrap rounded-md bg-neutral-100 px-4 py-2 text-center align-middle font-semibold text-neutral-900"
						href={`${env.BASE_URL}/auth/verifica-email-action?t=${token}&u=${userId}${redirect ? `&r=${redirect}` : ""}`}
					>
						Clicca qui per verificare
					</Button>
				</Section>
			</>
		</Base>
	);
};

export default VerificaEmail;