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

interface Props {
  po: { poNumber: string; title: string; paymentRef?: string | null };
}

export function PaymentProcessedEmail({ po }: Props) {
  return (
    <EmailLayout>
      <Text style={{ fontSize: "16px", color: "#111827", marginTop: 0 }}>
        Payment has been confirmed for purchase order <strong>{po.poNumber}</strong>.
      </Text>
      <Section style={{ backgroundColor: "#f0fdf4", borderRadius: "8px", padding: "16px", border: "1px solid #dcfce7" }}>
        <Text style={{ margin: "0 0 4px", fontSize: "13px", color: "#6b7280" }}>Title</Text>
        <Text style={{ margin: "0 0 12px" }}>{po.title}</Text>
        {po.paymentRef && (
          <>
            <Text style={{ margin: "0 0 4px", fontSize: "13px", color: "#6b7280" }}>Payment Reference</Text>
            <Text style={{ margin: 0, fontFamily: "monospace" }}>{po.paymentRef}</Text>
          </>
        )}
      </Section>
      <Text style={{ fontSize: "14px", color: "#374151" }}>
        Please confirm receipt in PPMS once you have received the goods or services.
        This will close the purchase order.
      </Text>
    </EmailLayout>
  );
}

export default PaymentProcessedEmail;