import * as React from "react";
import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Section,
} from "@react-email/components";
import { emailTokens } from "../tokens";

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

export function EmailLayout({ previewText, children }: EmailLayoutProps) {
  return (
    <Html lang="en">
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="color-scheme" content="light dark" />
        <meta name="supported-color-schemes" content="light dark" />
        <style>{`
          body {
            margin: 0;
            padding: 0;
            background-color: ${emailTokens.colors.canvas};
            font-family: ${emailTokens.fonts.body};
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
          }
          a {
            color: inherit;
            text-decoration: none;
          }
          @media only screen and (max-width: 600px) {
            .email-outer-padding {
              padding: 16px 8px !important;
            }
            .email-card-padding {
              padding: 24px 20px !important;
            }
            .email-meta-grid {
              display: block !important;
              width: 100% !important;
            }
          }
        `}</style>
      </Head>
      <Preview>{previewText}</Preview>
      <Body
        style={{
          margin: 0,
          padding: 0,
          backgroundColor: emailTokens.colors.canvas,
          fontFamily: emailTokens.fonts.body,
        }}
      >
        <Section className="email-outer-padding" style={{ padding: "36px 16px" }}>
          <Container
            style={{
              maxWidth: emailTokens.layout.maxWidth,
              margin: "0 auto",
              backgroundColor: emailTokens.colors.card,
              borderRadius: emailTokens.layout.cardRadius,
              border: `1px solid ${emailTokens.colors.border}`,
              overflow: "hidden",
              boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
            }}
          >
            <div className="email-card-padding" style={{ padding: "36px 36px" }}>
              {children}
            </div>
          </Container>
        </Section>
      </Body>
    </Html>
  );
}
