import * as React from "react";
import { Heading, Section, Text, Row, Column } from "@react-email/components";
import { MintelLayout } from "../layouts/MintelLayout";

export interface ContactFormNotificationProps {
  name: string;
  email: string;
  message: string;
  productName?: string;
}

export const ContactFormNotification = ({
  name,
  email,
  message,
  productName,
}: ContactFormNotificationProps) => {
  const preview = `New message from ${name}`;

  return (
    <MintelLayout preview={preview}>
      <Heading style={h1}>New Submission</Heading>
      <Text style={intro}>
        A new message has been received via the contact form.
      </Text>

      <Section style={detailsContainer}>
        <Row>
          <Column style={labelCol}>
            <Text style={label}>Name</Text>
          </Column>
          <Column>
            <Text style={value}>{name}</Text>
          </Column>
        </Row>
        <Row>
          <Column style={labelCol}>
            <Text style={label}>Email</Text>
          </Column>
          <Column>
            <Text style={value}>{email}</Text>
          </Column>
        </Row>
        {productName && (
          <Row>
            <Column style={labelCol}>
              <Text style={label}>Product</Text>
            </Column>
            <Column>
              <Text style={value}>{productName}</Text>
            </Column>
          </Row>
        )}
      </Section>

      <Section style={messageSection}>
        <Text style={label}>Message</Text>
        <Text style={messageText}>{message}</Text>
      </Section>
    </MintelLayout>
  );
};

export default ContactFormNotification;

const h1 = {
  fontSize: "28px",
  fontWeight: "900",
  margin: "0 0 16px",
  color: "#ffffff",
  letterSpacing: "-0.04em",
};

const intro = {
  fontSize: "16px",
  color: "#888888",
  margin: "0 0 32px",
};

const detailsContainer = {
  backgroundColor: "#151515",
  padding: "24px",
  borderRadius: "8px",
  marginBottom: "24px",
};

const labelCol = {
  width: "100px",
};

const label = {
  fontSize: "10px",
  fontWeight: "900",
  textTransform: "uppercase" as const,
  color: "#444444",
  margin: "0 0 4px",
  letterSpacing: "0.1em",
};

const value = {
  fontSize: "16px",
  color: "#ffffff",
  margin: "0 0 12px",
};

const messageSection = {
  padding: "0 24px",
};

const messageText = {
  fontSize: "16px",
  lineHeight: "24px",
  color: "#cccccc",
  fontStyle: "italic",
  borderLeft: "2px solid #222222",
  paddingLeft: "16px",
  margin: "12px 0 0",
};