import { Text, Section } from "@react-email/components";
import { EmailLayout } from "./layout";

interface Props {
  po: { poNumber: string; title: string };
  submitterName: string;
}

export function PoSubmittedEmail({ po, submitterName }: Props) {
  return (
    <EmailLayout>
      <Text style={{ fontSize: "16px", color: "#111827", marginTop: 0 }}>
        A new purchase order has been submitted for your review.
      </Text>
      <Section
        style={{
          backgroundColor: "#f3f4f6",
          borderRadius: "8px",
          padding: "16px",
          marginTop: "16px",
        }}
      >
        <Text style={{ margin: "0 0 4px", fontSize: "13px", color: "#6b7280" }}>PO Number</Text>
        <Text style={{ margin: "0 0 12px", fontSize: "15px", fontWeight: "600", color: "#111827", fontFamily: "monospace" }}>
          {po.poNumber}
        </Text>
        <Text style={{ margin: "0 0 4px", fontSize: "13px", color: "#6b7280" }}>Title</Text>
        <Text style={{ margin: "0 0 12px", fontSize: "15px", color: "#111827" }}>{po.title}</Text>
        <Text style={{ margin: "0 0 4px", fontSize: "13px", color: "#6b7280" }}>Submitted by</Text>
        <Text style={{ margin: 0, fontSize: "15px", color: "#111827" }}>{submitterName}</Text>
      </Section>
      <Text style={{ fontSize: "14px", color: "#374151" }}>
        Please log in to PPMS to review and take action on this order.
      </Text>
    </EmailLayout>
  );
}

export default PoSubmittedEmail;