
import React from 'react';
import { useLocation, Link } from 'react-router-dom';

const Sidebar: React.FC = () => {
  const location = useLocation();
  const path = location.pathname;

  const menuItems = [
    { id: '/ai/chat', label: 'Intelligent Chat', icon: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z' },
    { id: '/ai/image', label: 'Image Forge', icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' },
    { id: '/ai/video', label: 'Cinematic Video', icon: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z' },
    { id: '/ai/search', label: 'Knowledge Base', icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' },
  ];

  return (
    <div className="w-72 bg-white border-r border-slate-200 flex flex-col h-full z-20 shadow-xl">
      <div className="p-8">
        <h1 className="text-2xl font-black text-[#EE0434] tracking-tight">
          LUMINA
        </h1>
        <div className="h-1 w-12 bg-[#EE0434] mt-1 rounded-full"></div>
        <p className="text-[10px] text-slate-400 mt-3 uppercase tracking-[0.2em] font-bold">Solutions Platform</p>
      </div>

      <nav className="flex-1 px-4 space-y-1 mt-2">
        {menuItems.map((item) => (
          <Link
            key={item.id}
            to={item.id}
            className={`w-full flex items-center space-x-3 px-6 py-4 rounded-xl transition-all duration-300 ${
              path === item.id
                ? 'bg-red-50 text-[#EE0434] font-semibold shadow-inner'
                : 'text-slate-500 hover:bg-red-50/50 hover:text-[#EE0434]'
            }`}
          >
            <svg
              className={`w-6 h-6 transition-colors ${path === item.id ? 'text-[#EE0434]' : 'text-slate-300'}`}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={item.icon} />
            </svg>
            <span className="text-sm">{item.label}</span>
            {path === item.id && (
                <div className="ml-auto w-1.5 h-6 bg-[#EE0434] rounded-full"></div>
            )}
          </Link>
        ))}
      </nav>

      <div className="p-6 mt-auto">
        <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 flex items-center space-x-3 shadow-sm hover:shadow-md transition-shadow cursor-pointer">
          <div className="w-10 h-10 rounded-xl bg-[#EE0434] flex items-center justify-center text-white font-bold shadow-lg">
            S
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-bold text-slate-800 truncate">Senior Executive</p>
            <p className="text-[10px] text-[#EE0434] font-bold uppercase tracking-wider">Enterprise Pro</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;
