import { ChevronLeft, ChevronRight } from 'lucide-react';

import type { SidebarPage } from '@/business/app-shell/types';
import { SidebarBrand } from '@/components/sidebar/SidebarBrand';
import { SidebarNavigation } from '@/components/sidebar/SidebarNavigation';

interface SidebarViewProps {
  readonly page: SidebarPage;
}

export function SidebarView({ page }: SidebarViewProps) {
  return (
    <aside className={`${page.collapsed ? 'w-16' : 'w-64'} bg-gradient-to-b from-slate-900 via-slate-900 to-slate-800 h-full flex flex-col transition-all duration-300 shadow-2xl shadow-black/20 relative`}>
      <SidebarBrand collapsed={page.collapsed} />

      <button
        type="button"
        onClick={page.toggleCollapsed}
        aria-label={page.collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
        className="absolute -right-3 top-[10px] w-3 h-9 bg-violet-500 hover:bg-violet-400 rounded-r flex items-center justify-center cursor-pointer z-50"
      >
        {page.collapsed ? <ChevronRight size={12} strokeWidth={3} className="text-white" /> : <ChevronLeft size={12} strokeWidth={3} className="text-white" />}
      </button>

      <SidebarNavigation
        modules={page.modules}
        currentModule={page.currentModule}
        collapsed={page.collapsed}
        onSelectModule={page.setCurrentModule}
      />
    </aside>
  );
}
