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

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

export function PoApprovedEmail({ po, note }: Props) {
  return (
    <EmailLayout>
      <Text style={{ fontSize: "16px", color: "#111827", marginTop: 0 }}>
        Your purchase order has been{" "}
        <span style={{ color: "#16a34a", fontWeight: "600" }}>approved</span>.
      </Text>
      <Section style={{ backgroundColor: "#f0fdf4", borderRadius: "8px", padding: "16px", marginTop: "16px", border: "1px solid #dcfce7" }}>
        <Text style={{ margin: "0 0 4px", fontSize: "13px", color: "#6b7280" }}>PO Number</Text>
        <Text style={{ margin: "0 0 12px", fontWeight: "600", fontFamily: "monospace" }}>{po.poNumber}</Text>
        <Text style={{ margin: "0 0 4px", fontSize: "13px", color: "#6b7280" }}>Title</Text>
        <Text style={{ margin: 0 }}>{po.title}</Text>
      </Section>
      {note && (
        <Section style={{ marginTop: "16px", borderLeft: "3px solid #2563eb", paddingLeft: "12px" }}>
          <Text style={{ margin: 0, fontSize: "14px", color: "#374151", fontStyle: "italic" }}>
            "{note}"
          </Text>
        </Section>
      )}
      <Text style={{ fontSize: "14px", color: "#374151" }}>
        Accounts have been notified and will process payment shortly.
      </Text>
    </EmailLayout>
  );
}

export default PoApprovedEmail;