/*
Project: ChatGPT Web Interface
Developer: Molla Samser
Email: help@rskworld.in
Phone: +91 93305 39277
Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
Website: https://rskworld.in/
Year: 2026
*/

import React from 'react';

function Sidebar({ conversations, currentConversationId, onSelectConversation, onNewConversation, onDeleteConversation, isOpen, onToggle }) {
  const handleDelete = (e, id) => {
    e.stopPropagation();
    if (window.confirm('Are you sure you want to delete this conversation?')) {
      onDeleteConversation(id);
    }
  };

  return (
    <>
      {isOpen && <div className="sidebar-overlay" onClick={onToggle}></div>}
      <aside className={`sidebar ${isOpen ? 'open' : ''}`}>
        <div className="sidebar-header">
          <button className="new-chat-button" onClick={onNewConversation}>
            <i className="fas fa-plus"></i>
            New Chat
          </button>
          <button className="sidebar-close" onClick={onToggle}>
            <i className="fas fa-times"></i>
          </button>
        </div>
        <div className="conversation-list">
          {conversations.length === 0 ? (
            <div className="empty-conversations">
              <p>No conversations yet. Start a new chat!</p>
            </div>
          ) : (
            conversations.map(conv => (
              <div
                key={conv.id}
                className={`conversation-item ${currentConversationId === conv.id ? 'active' : ''}`}
                onClick={() => onSelectConversation(conv.id)}
              >
                <div className="conversation-title">
                  <i className="fas fa-comment"></i>
                  <span>{conv.title}</span>
                </div>
                <button
                  className="delete-conversation"
                  onClick={(e) => handleDelete(e, conv.id)}
                  title="Delete conversation"
                >
                  <i className="fas fa-trash"></i>
                </button>
              </div>
            ))
          )}
        </div>
        <div className="sidebar-footer">
          <div className="footer-info">
            <p>ChatGPT Web Interface</p>
            <p className="footer-link">
              <a href="https://rskworld.in/" target="_blank" rel="noopener noreferrer">
                rskworld.in
              </a>
            </p>
          </div>
        </div>
      </aside>
    </>
  );
}

export default Sidebar;