"use client";
import{ChevronDown,MessageCircle,Send,X}from"lucide-react";import{useState}from"react";
export function ChatWidget({seller="Afterglow Productions"}:{seller?:string}){const[open,setOpen]=useState(false);const[sent,setSent]=useState(false);return <div className="chat-widget">{open&&<section className="chat-popover"><header><span><i/><div><b>Chat with {seller}</b><small>Usually replies within 2 hours</small></div></span><button onClick={()=>setOpen(false)} aria-label="Close chat"><X size={18}/></button></header><div className="chat-safety">Keep payment and ticket transfers on EasyPay Tickets.</div><div className="chat-thread"><span className="chat-time">Today · 2:14 PM</span><div className="seller-message">Hi! Ask us anything about this event.</div>{sent&&<div className="buyer-message">Is parking available at the venue?</div>}</div><form onSubmit={e=>{e.preventDefault();setSent(true)}}><input aria-label="Message" placeholder="Type your question…"/><button aria-label="Send message"><Send size={17}/></button></form></section>}<button className="chat-launcher" onClick={()=>setOpen(!open)}><MessageCircle size={21}/><span>Ask the seller</span>{open?<ChevronDown size={17}/>:<i>1</i>}</button></div>}
