components/comments-section.js

class CustomCommentsSection extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .comments-section {
          background: linear-gradient(135deg, #3b5998 0%, #2c3e50 100%);
          padding: 20px;
          border-radius: 10px;
          margin-top: 20px;
          color: #00ff00;
        }
.comments-header {
          font-size: 1.2rem;
          margin-bottom: 15px;
          padding-bottom: 5px;
          border-bottom: 1px solid #3b5998;
        }
        .comment-form textarea {
          width: 100%;
          padding: 10px;
          margin-bottom: 10px;
          border-radius: 5px;
          border: 1px solid #ccc;
          background: rgba(255,255,255,0.9);
        }
        .comment-form button {
          background: #3b5998;
          color: white;
          border: none;
          padding: 8px 15px;
          border-radius: 5px;
          cursor: pointer;
        }
        .comments-list {
          margin-top: 20px;
        }
        .comment {
          display: flex;
          margin-bottom: 15px;
          padding-bottom: 15px;
          border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .comment-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .comment-content {
          flex: 1;
        }
        .comment-author {
          font-weight: bold;
          margin-bottom: 5px;
        }
        .comment-date {
          font-size: 0.8rem;
          color: #00ff00;
margin-bottom: 5px;
        }
        .comment-text {
          line-height: 1.4;
        }
      </style>
      <div class="comments-section">
        <div class="comments-header">Comments</div>
        
        <div class="comment-form">
          <textarea placeholder="Write a comment..." rows="3"></textarea>
          <button>Post Comment</button>
        </div>
        
        <div class="comments-list">
          <div class="comment">
            <img src="http://static.photos/people/200x200/2" class="comment-avatar">
            <div class="comment-content">
              <div class="comment-author">Tom Anderson</div>
              <div class="comment-date">2 days ago</div>
              <div class="comment-text">Welcome to MySpace! This is going to be awesome!</div>
            </div>
          </div>
          <div class="comment">
            <img src="http://static.photos/people/200x200/3" class="comment-avatar">
            <div class="comment-content">
              <div class="comment-author">Chris DeWolfe</div>
              <div class="comment-date">1 day ago</div>
              <div class="comment-text">Great profile! Check out the new features we added!</div>
            </div>
          </div>
        </div>
      </div>
    `;

    // Comment form submission
    this.shadowRoot.querySelector('.comment-form button').addEventListener('click', () => {
      const text = this.shadowRoot.querySelector('.comment-form textarea').value;
      if (text.trim()) {
        const comment = document.createElement('div');
        comment.className = 'comment';
        comment.innerHTML = `
          <img src="http://static.photos/people/200x200/${Math.floor(Math.random()*10)+1}" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-author">New User</div>
            <div class="comment-date">Just now</div>
            <div class="comment-text">${text}</div>
          </div>
        `;
        this.shadowRoot.querySelector('.comments-list').prepend(comment);
        this.shadowRoot.querySelector('.comment-form textarea').value = '';
      }
    });
  }
}
customElements.define('custom-comments-section', CustomCommentsSection);