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

export const ContattoAnnuncioMailTag = "contattoAnnuncioEmail";

export const ContattoAnnuncioPropsSchema = z.object({
	nome: z.string(),
	codice: z.string(),
	email: z.email(),
	telefono: z.string(),
	messaggio: z.string(),
});

const ContattoAnnuncioEmail = ({
	nome,
	codice,
	email,
	telefono,
	messaggio,
}: z.infer<typeof ContattoAnnuncioPropsSchema>) => {
	return (
		<Base preview="Contatto Email">
			<>
				<Heading className="text-center text-3xl leading-8">
					Richiesta di contatto
				</Heading>

				<Section className="px-5 text-left text-base md:px-12">
					<Row>
						<Text>Data: {new Date().toLocaleString("it-IT")}</Text>
						<Text>Nome: {nome}</Text>
						<Text>Annuncio: {codice}</Text>
						<Text>Telefono: {telefono}</Text>
						<Text>Email: {email}</Text>
						<Text>Messaggio: {messaggio}</Text>
					</Row>
				</Section>
				<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={`${env.BASE_URL}/annuncio/${codice}`}
					>
						Vai all&apos;annuncio
					</Button>
				</Section>
			</>
		</Base>
	);
};
export default ContattoAnnuncioEmail;