import {
  Body,
  Container,
  Head,
  Html,
  Preview,
  Section,
  Text,
  Tailwind,
  Img,
  Hr,
} from "@react-email/components";
import type { JSX } from "react";

const Base = ({
  children,
  preview,
  noreply,
}: {
  children: JSX.Element;
  preview: string;
  noreply?: boolean;
}) => {
  return (
    <Tailwind
      config={{
        theme: {
          container: {
            center: true,
            padding: "2rem",
            screens: {
              "2xl": "1400px",
            },
          },
        },
      }}
    >
      <Html>
        <Head />

        <Preview>{preview}</Preview>
        <Body className="bg-neutral-50 py-2 text-center font-sans text-base text-neutral-700">
          <Container className="max-w-xl bg-white pt-2 pb-10">
            <Img
              referrerPolicy="no-referrer"
              width={230.5}
              height={44.25}
              src={
                "https://lh3.google.com/u/0/d/1nEurjVWPiz0F8QRLhKcT4ZSujeFRChBs" //TEMP FIX
                //getMediaUrl("/Infoalloggi.png")
              }
              alt="Infoalloggi.it"
              className="mx-auto my-2 scale-80"
            />

            <Section className="max-w-lg px-8">
              <Hr />
              <Section className="max-w-md">{children}</Section>

              <Section className="mt-4">
                {noreply && (
                  <Text className="text-xs text-neutral-500">
                    Questo è un messaggio automatico, per favore non rispondere
                    a questa email.
                  </Text>
                )}
              </Section>
              <Section className="mt-3">
                <Text className="text-left text-sm">
                  Arcenia S.r.l. Sede legale: Via Beata Giovanna 1, Bassano del
                  Grappa (VI)
                </Text>
              </Section>
            </Section>
          </Container>
        </Body>
      </Html>
    </Tailwind>
  );
};
export default Base;
