frontend/src/components/rich/EmailSentCard.tsx

import { EmailSentData } from "@/types/chat";

export default function EmailSentCard({ data }: { data: EmailSentData }) {
  return (
    <div className="mt-3 rounded-xl border border-[#D1Fae5] bg-[#F0FDF8] overflow-hidden shadow-sm">
      <div className="px-5 py-4 flex items-start gap-3">
        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[#47C3A6] flex items-center justify-center mt-0.5">
          <CheckIcon />
        </div>
        <div className="min-w-0">
          <p className="text-sm font-semibold text-[#0F766E]">Email sent</p>
          <p className="text-xs text-[#475569] mt-1">
            <span className="font-medium">To:</span> {data.to}
            {data.intended_to && data.intended_to !== data.to && (
              <span className="text-[#94A3B8]"> (test override — intended for {data.intended_to})</span>
            )}
          </p>
          <p className="text-xs text-[#475569] mt-0.5 truncate">
            <span className="font-medium">Subject:</span> {data.subject}
          </p>
          {data.simulated && (
            <p className="text-[10px] text-[#94A3B8] mt-2 italic">
              Simulation mode — configure SMTP credentials to deliver real email.
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

function CheckIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
      <path d="M5 10l3.5 3.5L15 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}