import {
	Body,
	Container,
	Head,
	Hr,
	Html,
	Img,
	Preview,
	Section,
	Tailwind,
	Text,
} from "@react-email/components";
import type { JSX } from "react";
import { env } from "~/env";

const Base = ({
	children,
	preview,
	noreply,
}: {
	children: JSX.Element;
	preview: string;
	noreply?: boolean;
}) => {
	return (
		<Tailwind
			config={{
				theme: {
					container: {
						center: true,
						padding: "2rem",
						screens: {
							"2xl": "1400px",
						},
					},
				},
			}}
		>
			<Html>
				<Head />

				<Preview>{preview}</Preview>
				<Body className="py-2 text-center font-sans text-base text-neutral-700">
					<Container className="max-w-2xl rounded-lg border border-[#eaeaea] border-solid pt-2 pb-10">
						<div className="my-2 w-full py-2 dark:bg-white">
							<Img
								alt="Logo Infoalloggi.it"
								className="mx-auto"
								height={44}
								src={`${env.BASE_URL}/Infoalloggi.png`}
								width={230}
							/>
						</div>

						<Section className="max-w-xl px-4">
							<Hr />
							<Section className="max-w-lg">{children}</Section>

							<Section className="mt-4">
								{noreply && (
									<Text className="text-neutral-500 text-xs">
										Questo è un messaggio automatico, per favore non rispondere
										a questa email.
									</Text>
								)}
							</Section>
							<Section className="mt-3 text-center">
								<Text className="text-sm">
									Arcenia S.r.l. Via Beata Giovanna 1, Bassano del Grappa (VI) -
									tel: 0424529869
								</Text>
							</Section>
						</Section>
					</Container>
				</Body>
			</Html>
		</Tailwind>
	);
};
export default Base;
