import React from 'react';
import { Link } from 'react-router-dom';
import { Book, BarChart2, Share2, Settings, User } from 'lucide-react';

const TopNav = ({ notebookName, activeTab, onTabChange }) => {
    return (
        <div className="h-14 bg-white border-b border-slate-200 flex items-center justify-between px-4 fixed top-0 w-full z-20">
            {/* LEFT: Logo & Breadcrumbs */}
            <div className="flex items-center gap-4">
                <Link to="/dashboard" className="flex items-center gap-2 text-slate-700 hover:text-blue-600 transition-colors">
                    <div className="p-1.5 bg-blue-600 text-white rounded-md">
                        <Book size={18} />
                    </div>
                    <span className="font-bold text-lg tracking-tight">Vertical.ai</span>
                </Link>
                {notebookName && (
                    <>
                        <span className="text-slate-300 text-xl">/</span>
                        <span className="font-medium text-slate-600">{notebookName}</span>
                    </>
                )}
            </div>

            {/* CENTER: Tabs (if inside notebook) */}
            {notebookName && (
                <div className="hidden md:flex items-center gap-1 bg-slate-100 p-1 rounded-lg">
                    <button
                        onClick={() => onTabChange('chat')}
                        className={`px-3 py-1.5 text-sm font-medium rounded-md transition-all ${activeTab === 'chat' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
                    >
                        Chat
                    </button>
                    <button
                        onClick={() => onTabChange('notes')}
                        className={`px-3 py-1.5 text-sm font-medium rounded-md transition-all ${activeTab === 'notes' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
                    >
                        Notebook
                    </button>
                    <div className="w-px h-4 bg-slate-300 mx-2"></div>
                    <button className="text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 px-2">
                        <BarChart2 size={16} /> Analytics
                    </button>
                </div>
            )}

            {/* RIGHT: Profile */}
            <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 border border-slate-200">
                    <User size={16} />
                </div>
            </div>
        </div>
    );
};

export default TopNav;