import React from 'react';

const pinnedMessages = [
  {
    id: 1,
    author: 'Anderson',
    avatar: 'A',
    gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)',
    badge: 'Founder',
    time: 'Jan 15, 2026',
    text: 'Welcome to AeThex Connect! Please read the rules in #rules and introduce yourself in #introductions. The Trinity awaits! 🔥',
    pinnedBy: 'Anderson',
  },
  {
    id: 2,
    author: 'Trevor',
    avatar: 'T',
    gradient: 'linear-gradient(135deg, #ff0000, #cc0000)',
    badge: 'Foundation',
    time: 'Jan 20, 2026',
    text: 'Important: Authentication v2.1.0 is now live! All users should update their Passport credentials. Check #updates for migration guide.',
    pinnedBy: 'Trevor',
  },
  {
    id: 3,
    author: 'Sarah',
    avatar: 'S',
    gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)',
    badge: 'Labs',
    time: 'Feb 1, 2026',
    text: 'Nexus Engine v2.0 is officially out of beta! Huge thanks to everyone who helped test. Read the changelog in #changelog 🚀',
    pinnedBy: 'Sarah',
  },
];

export default function PinnedMessagesPanel({ channelName, onClose, onJumpToMessage }) {
  return (
    <div className="pinned-panel">
      <div className="pinned-header">
        <span className="pinned-icon">📌</span>
        <span className="pinned-title">Pinned Messages</span>
        <span className="pinned-channel">#{channelName || 'general'}</span>
        <button className="pinned-close" onClick={onClose}>✕</button>
      </div>

      <div className="pinned-content">
        {pinnedMessages.length === 0 ? (
          <div className="pinned-empty">
            <span className="empty-icon">📌</span>
            <p>This channel doesn't have any pinned messages... yet.</p>
          </div>
        ) : (
          <div className="pinned-list">
            {pinnedMessages.map((msg) => (
              <div key={msg.id} className="pinned-message">
                <div className="pinned-message-header">
                  <div 
                    className="pinned-avatar"
                    style={{ background: msg.gradient || '#36393f' }}
                  >
                    {msg.avatar}
                  </div>
                  <div className="pinned-author-info">
                    <span className="pinned-author">{msg.author}</span>
                    {msg.badge && <span className={`pinned-badge ${msg.badge.toLowerCase()}`}>{msg.badge}</span>}
                    <span className="pinned-time">{msg.time}</span>
                  </div>
                </div>
                <div className="pinned-message-text">{msg.text}</div>
                <div className="pinned-message-footer">
                  <span className="pinned-by">Pinned by {msg.pinnedBy}</span>
                  <button 
                    className="jump-to-btn"
                    onClick={() => onJumpToMessage?.(msg)}
                  >
                    Jump
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="pinned-footer">
        <span className="protip">
          <strong>PROTIP:</strong> You can pin up to 50 messages in a channel.
        </span>
      </div>
    </div>
  );
}