import * as React from "react";
import { Hr, Section, Text } from "@react-email/components";
import { BaseLayout } from "./BaseLayout";
import { MintelLogo } from "../components/MintelLogo";

export interface MintelLayoutProps {
  preview: string;
  children: React.ReactNode;
}

export const MintelLayout = ({ preview, children }: MintelLayoutProps) => {
  return (
    <BaseLayout preview={preview}>
      <Section style={header}>
        <MintelLogo />
      </Section>
      <Hr style={hr} />
      <Section style={mainContent}>{children}</Section>
      <Hr style={hr} />
      <Section style={footer}>
        <Text style={footerText}>
          &copy; 2026 Mintel Infrastructure. Secure Communication Channel.
        </Text>
      </Section>
    </BaseLayout>
  );
};

const header = {
  marginBottom: "32px",
};

const mainContent = {
  marginBottom: "32px",
};

const hr = {
  borderColor: "#222222",
  margin: "20px 0",
};

const footer = {
  marginTop: "32px",
  textAlign: "center" as const,
};

const footerText = {
  fontSize: "12px",
  color: "#444444",
  fontWeight: 700,
  textTransform: "uppercase" as const,
  letterSpacing: "0.1em",
};