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

export interface ConfirmationMessageProps {
  name: string;
  clientName: string;
  clientLogo?: string;
  brandColor?: string;
}

export const ConfirmationMessage = ({
  name,
  clientName,
  clientLogo,
  brandColor,
}: ConfirmationMessageProps) => {
  const preview = `Thank you for your message, ${name}`;

  return (
    <ClientLayout
      preview={preview}
      clientName={clientName}
      clientLogo={clientLogo}
      brandColor={brandColor}
    >
      <Heading style={h1}>Thank You</Heading>
      <Text style={text}>Hello {name},</Text>
      <Text style={text}>
        Thank you for contacting us. We have received your message and will get
        back to you as soon as possible.
      </Text>
      <Text style={text}>
        Best regards,
        <br />
        The {clientName} Team
      </Text>
    </ClientLayout>
  );
};

export default ConfirmationMessage;

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

const text = {
  fontSize: "16px",
  lineHeight: "24px",
  color: "#cccccc",
  margin: "16px 0",
};