/**
 * Base Email Layout Component
 * Provides consistent structure for all ZEN emails
 */

import {
	Body,
	Container,
	Head,
	Heading,
	Html,
	Preview,
	Section,
	Text,
	Img,
	Tailwind,
	Hr,
	Link,
} from "@react-email/components";

export const BaseLayout = ({
	preview,
	title,
	children,
	companyName,
	logoURL,
	supportSection = false,
	supportEmail
}) => {
	const appName = companyName || process.env.ZEN_NAME || 'ZEN';
	const logoSrc = logoURL || process.env.ZEN_EMAIL_LOGO || null;
	const logoHref = process.env.ZEN_EMAIL_LOGO_URL || null;
	const resolvedSupportEmail = supportEmail || process.env.ZEN_SUPPORT_EMAIL;
	const currentYear = new Date().getFullYear();

	return (
		<Html lang="fr">
			<Head />
			{preview && <Preview>{preview}</Preview>}
			<Tailwind>
				<Body className="bg-white font-sans">
					<Container className="mx-auto px-[15px] py-[20px] max-w-[525px]">

					<Section className="mb-[40px]">
						{logoSrc ? (
							logoHref ? (
								<Link href={logoHref}>
									<Img src={logoSrc} alt={appName} className="w-auto max-h-[64px]" />
								</Link>
							) : (
								<Img src={logoSrc} alt={appName} className="w-auto max-h-[64px]" />
							)
						) : (
							<Heading className="text-[16px] font-semibold text-neutral-900 m-0 tracking-tight">
								{appName}
							</Heading>
						)}
					</Section>

					{title && (
						<Heading className="text-[22px] font-semibold text-neutral-900 mt-0 mb-[8px] tracking-tight">
							{title}
						</Heading>
					)}

						{children}

						<Hr className="border-neutral-100 mt-[48px] mb-[20px]" />

						<Text className="text-[12px] leading-[20px] text-neutral-400 m-0">
							© {currentYear} — {appName}. Tous droits réservés.
							{supportSection && resolvedSupportEmail && (
								<>
									{' · '}
									<Link href={`mailto:${resolvedSupportEmail}`} className="text-neutral-400 underline">
										{resolvedSupportEmail}
									</Link>
								</>
							)}
						</Text>

					</Container>
				</Body>
			</Tailwind>
		</Html>
	);
};
