import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { MessageCircle } from "lucide-react";
export default function WhatsAppSimulator() {
 const [title, setTitle] = useState("xxx");
 const [message, setMessage] = useState(
 "Olá xxxx, esta é uma campanha realizada xxx, realize seu xxxx através do link abaixo!"
 );
 const [footer, setFooter] = useState("Esta é uma mensagem automática.");
 const [buttonText, setButtonText] = useState("xxxx");
 return (
 <div className="flex flex-col items-center p-6 bg-gray-100 min-h-screen">
 <h1 className="text-2xl font-bold mb-4">Simulador de Mensagens do WhatsApp</h1>
 <Card className="w-96 p-4 shadow-lg">
 <CardContent className="bg-white p-4 rounded-lg border border-gray-200">
 <p className="font-bold text-green-700">{title}</p>
 <p className="mt-2 text-gray-800">{message}</p>
 <p className="mt-2 text-gray-500 text-sm">{footer}</p>
 <div className="mt-4 flex items-center text-blue-600 cursor-pointer">
 <MessageCircle className="mr-2" />
 <span>{buttonText}</span>
 </div>
 </CardContent>
 </Card>
 <div className="mt-6 w-96 p-4 bg-white rounded-lg shadow-md border border-gray-200">
 <h2 className="text-lg font-semibold mb-2">Personalizar Mensagem</h2>
 <Input placeholder="Título" value={title} onChange={(e) => setTitle(e.target.value)} className="mb-2" />
 <Textarea placeholder="Mensagem" value={message} onChange={(e) => setMessage(e.target.value)} className="mb-2" />
 <Input placeholder="Rodapé" value={footer} onChange={(e) => setFooter(e.target.value)} className="mb-2" />
 <Input placeholder="Texto do Botão" value={buttonText} onChange={(e) => setButtonText(e.target.value)} className="mb-2" />
 <Button className="w-full mt-2">Atualizar</Button>
 </div>
 </div>
 );
}