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

const baseUrl = process.env.BASE_URL
  ? `${process.env.BASE_URL}`
  : "http://localhost:3000";

const appName = process.env.APP_NAME ? `${process.env.APP_NAME}` : "Momentus";

export const ContactFormEmail = ({
  firstName,
  lastName,
  phone,
  description,
}: any) => (
  <Html>
    <Head />
    <Preview>{appName} contact</Preview>
    <Body style={main}>
      <Container style={container}>
        <Img
          src={`${baseUrl}/assets/images/logo/The-iboost-logo.png`}
          width="180"
          height="50"
          alt="The iBoost"
          style={logo}
        />
        <Text style={paragraph}>
          Hi {firstName} {lastName},
        </Text>
        <Text style={paragraph}>
          Thank you for submitting your inquiry/contact form! We will respond to
          you promptly.
        </Text>
        <Section>
          <Row>
            <Column style={column}>Phone Number: {phone}</Column>
          </Row>
          <Row>
            <Column style={column}>Description: {description}</Column>
          </Row>
        </Section>
        <Text style={paragraph}>
          Best,
          <br />
          {appName}
        </Text>
        <Hr style={hr} />
        <Text style={footer}>
          KSA, Riyadh, Olaya Street, Cerecon Building # 15, 8th floor
        </Text>
      </Container>
    </Body>
  </Html>
);

export default ContactFormEmail;

const main = {
  backgroundColor: "black",
  color: "white",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const container = {
  margin: "0 auto",
  padding: "20px 0 48px",
};

const column = {
  width: "50%",
  padding: "7px 0",
};

const logo = {
  margin: "0 auto",
};

const paragraph = {
  fontSize: "16px",
  lineHeight: "26px",
};

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

const footer = {
  color: "#FFFFFF80",
  fontSize: "13px",
};
