import { Body, Html, Head, Container, Img, Tailwind } from '@react-email/components';
import type { ReactNode } from 'react';

const MainLayout = ({ children }: { children: ReactNode }) => {
  return (
    <Html>
      <Head />
      <Tailwind>
        <Body className="mx-auto my-12 bg-white font-sans">
          <Container className="rounded-lg bg-white p-8 shadow-lg">
            <Img
              className="mx-auto block"
              src="/officer-logo.png"
              width="240"
              alt="Officer Logo"
            />
            {children}
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

export default MainLayout;
