function ShareModal({ postUrl }) {
    const [visible, setVisible] = useState(false);

    if (!postUrl) return null;

    return (
        <>
            <button onClick={() => setVisible(true)}>Share</button>
            {visible && (
                <div className="listing-share-modal" style={{
                    display: 'flex',
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'rgba(0,0,0,0.5)'
                }}>
                    <div style={{
                        background: '#fff',
                        padding: '20px',
                        maxWidth: '400px',
                        width: '90%',
                        borderRadius: '6px',
                        position: 'relative'
                    }}>
                        <button
                            aria-label="Close"
                            style={{ position: 'absolute', top: 10, right: 10, fontSize: 24, background: 'none', border: 'none', cursor: 'pointer' }}
                            onClick={() => setVisible(false)}
                        >
                            &times;
                        </button>
                        <h2>Share this listing</h2>
                        <input type="text" className="share-link" readOnly value={postUrl} style={{ width: '100%', marginBottom: 10 }} />
                        <div className="listing-share-links">
                            <a href={`https://twitter.com/share?url=${encodeURIComponent(postUrl)}`} target="_blank">Twitter</a>
                            <a href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(postUrl)}`} target="_blank">Facebook</a>
                            <a href={`mailto:?body=${encodeURIComponent(postUrl)}`} target="_blank">Email</a>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}