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

export const GenericMailTag = "generic";

const props_base = z.object({
	title: z.string(),
	noreply: z.boolean().optional(),
	link: z
		.object({
			href: z.string(),
			label: z.string().optional(),
		})
		.optional(),
});

const props_content = z.union([
	z.object({
		corpo: z.custom<ReactNode>(),
		testo: z.undefined().optional(),
	}),
	z.object({
		testo: z.string(),
		corpo: z.undefined().optional(),
	}),
]);

export const GenericPropsSchema = props_base.and(props_content);

const Generic = ({
	title,
	noreply = false,
	testo,
	corpo,
	link = undefined,
}: z.infer<typeof GenericPropsSchema>) => {
	return (
		<Base noreply={noreply} preview={title}>
			<>
				<Heading className="text-center text-3xl leading-8">{title}</Heading>
				<Section className="px-5 text-left text-base md:px-12">
					{corpo ? (
						corpo
					) : (
						<Row>
							<Text>{testo}</Text>
						</Row>
					)}
					{link && (
						<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={`${link.href}`}
							>
								{link.label}
							</Button>
						</Section>
					)}
				</Section>
			</>
		</Base>
	);
};

export default Generic;