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

import { EMAIL_COLORS } from "./tokens"
import { getEmailAssetUrl } from "./utils"

export function RavenEmailLayout({
  preview,
  title,
  children,
}: {
  preview?: string
  title: string
  children: React.ReactNode
}) {
  return (
    <Html lang="pt-BR">
      <Head />
      {preview ? <Preview>{preview}</Preview> : null}
      <Body
        style={{
          margin: 0,
          padding: 0,
          backgroundColor: EMAIL_COLORS.background,
          fontFamily: "Arial, Helvetica, sans-serif",
          color: EMAIL_COLORS.textPrimary,
        }}
      >
        <Container style={{ padding: "28px 0" }}>
          <Section
            style={{
              backgroundColor: EMAIL_COLORS.card,
              border: `1px solid ${EMAIL_COLORS.border}`,
              borderRadius: "16px",
              padding: "24px",
            }}
          >
            <table cellPadding="0" cellSpacing="0" role="presentation" style={{ width: "100%" }}>
              <tbody>
                <tr>
                  <td style={{ verticalAlign: "middle" }}>
                    <Img
                      src={getEmailAssetUrl("/logo-raven.png")}
                      alt="Raven"
                      width="36"
                      height="36"
                      style={{ borderRadius: "10px", display: "block" }}
                    />
                  </td>
                  <td style={{ verticalAlign: "middle", paddingLeft: "12px" }}>
                    <Text style={{ margin: 0, fontSize: "18px", fontWeight: 800, color: EMAIL_COLORS.textPrimary }}>
                      Raven
                    </Text>
                  </td>
                </tr>
              </tbody>
            </table>

            <Text style={{ margin: "16px 0 0 0", fontSize: "12px", color: EMAIL_COLORS.textMuted }}>
              {title}
            </Text>

            {children}
          </Section>

          <Text style={{ margin: "14px 0 0 0", fontSize: "12px", color: EMAIL_COLORS.textMuted, textAlign: "center" }}>
            &copy; {new Date().getFullYear()} Raven — Rever Tecnologia
          </Text>
        </Container>
      </Body>
    </Html>
  )
}
