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

export interface BaseLayoutProps {
  preview: string;
  children: React.ReactNode;
  brandColor?: string;
}

export const BaseLayout = ({ preview, children }: BaseLayoutProps) => {
  return (
    <Html>
      <Head />
      <Preview>{preview}</Preview>
      <Body style={main}>
        <Container style={container}>
          <Section style={content}>{children}</Section>
        </Container>
      </Body>
    </Html>
  );
};

const main = {
  backgroundColor: "#0a0a0a",
  color: "#ffffff",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
};

const container = {
  backgroundColor: "#0f0f0f",
  margin: "0 auto",
  padding: "40px 0",
  maxWidth: "600px",
  border: "1px solid #1a1a1a",
  borderRadius: "12px",
};

const content = {
  padding: "0 40px",
};
