import React from 'react';
import { createPortal } from 'react-dom';
import { KnowledgeGroup } from '../types';
import { SearchHistoryList } from './SearchHistoryList';
import { X, History } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

interface HistoryDrawerProps {
    isOpen: boolean;
    onClose: () => void;
    groups: KnowledgeGroup[];
    onSelectHistory: (historyId: string) => void;
}

export const HistoryDrawer: React.FC<HistoryDrawerProps> = ({
    isOpen,
    onClose,
    groups,
    onSelectHistory
}) => {
    const { t } = useLanguage();
    if (!isOpen) return null;

    return createPortal(
        <div className="fixed inset-0 z-50 overflow-hidden">
            <div className="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity" onClick={onClose} />
            <div className="absolute inset-y-0 right-0 max-w-md w-full flex">
                <div className="flex-1 flex flex-col bg-white shadow-xl animate-in slide-in-from-right duration-300">
                    <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
                        <h2 className="text-lg font-medium text-gray-900 flex items-center gap-2">
                            <History size={20} />
                            {t('historyTitle')}
                        </h2>
                        <button
                            onClick={onClose}
                            className="text-gray-400 hover:text-gray-500 focus:outline-none"
                        >
                            <X size={24} />
                        </button>
                    </div>
                    <div className="flex-1 overflow-y-auto p-4">
                        <SearchHistoryList
                            groups={groups}
                            onSelectHistory={onSelectHistory}
                        />
                    </div>
                </div>
            </div>
        </div>,
        document.body
    );
};