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

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

export function EditsRequestedEmail({ po, note }: Props) {
  return (
    <EmailLayout>
      <Text style={{ fontSize: "16px", color: "#111827", marginTop: 0 }}>
        Your manager has requested edits on purchase order{" "}
        <strong>{po.poNumber}</strong>.
      </Text>
      <Section style={{ backgroundColor: "#fffbeb", borderRadius: "8px", padding: "16px", border: "1px solid #fef3c7" }}>
        <Text style={{ margin: "0 0 4px", fontSize: "13px", color: "#6b7280" }}>Title</Text>
        <Text style={{ margin: "0 0 12px" }}>{po.title}</Text>
        <Text style={{ margin: "0 0 4px", fontSize: "13px", color: "#6b7280" }}>Requested changes</Text>
        <Text style={{ margin: 0, fontStyle: "italic" }}>{note}</Text>
      </Section>
      <Text style={{ fontSize: "14px", color: "#374151" }}>
        Please log in to PPMS, make the requested edits, and resubmit the order.
      </Text>
    </EmailLayout>
  );
}

export default EditsRequestedEmail;