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 Base2 = ({
	children,
	preview,
	noreply,
}: {
	children: JSX.Element;
	preview: string;
	noreply?: boolean;
}) => {
	return (
		<Tailwind
			config={{
				theme: {
					container: {
						center: true,
						padding: "2rem",
						screens: {
							"2xl": "1400px",
						},
					},
					extend: {},
				},
			}}
		>
			<Html>
				<Head />

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

							<Hr className="max-w-xl" />
						</div>

						<Section className="max-w-xl px-4">
							<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 className="text-left 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 Base2;
