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

export const PwResetLinkMailTag = "pwResetLink";

export const PwResetLinkPropsSchema = z.object({
	resetlink: z.string(),
});

const PwResetLink = ({ resetlink }: z.infer<typeof PwResetLinkPropsSchema>) => {
	return (
		<Base preview="Link Reset Password">
			<>
				<Heading className="text-center text-3xl leading-8">
					Link Reset Password
				</Heading>
				<Section className="px-5 text-left text-base md:px-12">
					<Row>
						<Text>
							Abbiamo ricevuto la tua richiesta di reset password, clicca sul
							link sottostante per procedere.
						</Text>
					</Row>
					<Section className="mb-5">
						<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={resetlink}
						>
							Clicca qui per il reset della password
						</Button>
					</Section>
				</Section>
			</>
		</Base>
	);
};

export default PwResetLink;