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

interface EmailLayoutProps {
  children: React.ReactNode;
  previewText?: string;
}

export function EmailLayout({ children, previewText }: EmailLayoutProps) {
  return (
    <Html>
      <Head />
      <Body style={{ backgroundColor: "#f9fafb", fontFamily: "Inter, -apple-system, sans-serif" }}>
        <Container style={{ maxWidth: "560px", margin: "0 auto", padding: "32px 16px" }}>
          <Section
            style={{
              backgroundColor: "#ffffff",
              borderRadius: "12px",
              border: "1px solid #e5e7eb",
              padding: "32px",
            }}
          >
            <Section style={{ borderBottom: "2px solid #2563eb", paddingBottom: "12px", marginBottom: "24px" }}>
              <Text style={{ fontSize: "20px", fontWeight: "700", color: "#1d4ed8", margin: 0 }}>
                PPMS
              </Text>
            </Section>
            {children}
          </Section>
          <Section style={{ padding: "16px 0" }}>
            <Text style={{ fontSize: "12px", color: "#9ca3af", textAlign: "center" }}>
              This message was sent by PPMS (Pelagia Payment Management System). You received it
              because you are a stakeholder on this purchase order.
            </Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}
