"use client"; import React, { useState } from "react"; import { Monitor, Smartphone, Code, Eye, Copy } from "lucide-react"; import { toast } from "sonner"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/shared/components/ui/card"; import { Button } from "@/shared/components/ui/button"; interface CampaignPreviewCardProps { htmlBody: string; title: string; subject: string; senderName?: string; senderEmail?: string; } export function CampaignPreviewCard({ htmlBody, title, subject, senderName, senderEmail, }: CampaignPreviewCardProps) { const [device, setDevice] = useState<"desktop" | "mobile">("desktop"); const [viewMode, setViewMode] = useState<"visual" | "code">("visual"); const safeHtml = htmlBody.includes("") ? htmlBody.replace("", '') : `${htmlBody}`; return (

Conteúdo & Arte da Newsletter (Rascunho) Visualização exata do e-mail que será enviado para os contatos da lista



      
        {viewMode === "visual" ? (
          
            {/* Header info in email preview */}
            
              
                {title}
                Assunto: {subject}
              
              {senderEmail && (
                
                  De: {senderName ? `${senderName} <${senderEmail}>` : senderEmail}
                
              )}
            

            {/* Iframe with safe height and scroll */}
            
          </div>
        ) : (
          <div className="w-full max-w-4xl space-y-2">
            <div className="flex justify-end">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => {
                  navigator.clipboard.writeText(htmlBody);
                  toast.success("Código HTML copiado!");
                }}
                className="text-xs text-[#0F9FDF] hover:text-[#0C87BD] font-semibold"
              >
                <Copy className="w-3.5 h-3.5 mr-1" />
                Copiar Código HTML
              </Button>
            </div>
            <textarea
              readOnly
              value={htmlBody}
              className="w-full min-h-[400px] bg-zinc-900 border border-zinc-800 rounded-2xl p-4 font-mono text-xs text-emerald-400 resize-none focus:outline-none"
            />
          </div>
        )}
      </CardContent>
    </Card>
  );
}