import React from "react";
import {
  Html,
  Body,
  Head,
  Heading,
  Hr,
  Container,
  Preview,
  Section,
  Text,
} from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";

type OrderFormEmailProps = {
  order: string;
  senderEmail: string;
};

export default function OrderFormEmail({ order, senderEmail }: OrderFormEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>New order from kevo&apos;s attire.</Preview>
      <Tailwind>
        <Body className="bg-slate-700">
          <Container>
            <Section className="bg-white border-black my-10 px-10 py-4 rounded-md">
              <Heading className="leading-tight">You received a new order from the order form.</Heading>
              <Text>{order}</Text>
              <Hr />
              <Text>The sender&apos;s email is: {senderEmail}</Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}
