tvone/app/components/layout/admin/sidebar.tsx

import { getUserProfile } from "@/src/lib/auth/get-user-profile";
import { BarChart3, HelpCircle, LayoutDashboard, Newspaper, Settings, Users } from "lucide-react";
import { redirect } from "next/navigation";
import Image from 'next/image';

export const AdminSideBar = async () => {
    const user = await getUserProfile();

    if (!user) {
      redirect("/login");
    }

  return (
    <aside className="w-64 backdrop-blur-xl bg-white/80 border-r border-slate-200 p-6 flex flex-col">
    <div className="flex items-center gap-2 mb-10 px-2">
    <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold italic">
        <Image src="/logo.png" alt="TVone" width={50} height={50} />
      </div>
      <span className="font-bold text-sm tracking-tight leading-tight uppercase">
        TVone<br/><span className="text-blue-600 text-[10px]">de Notícias</span>
      </span>
    </div>

    <nav className="flex-1 space-y-1">
      <NavItem icon={<LayoutDashboard size={18}/>} label="Painel" />
      <NavItem icon={<Newspaper size={18}/>} label="Meus Artigos" />
      <NavItem icon={<Users size={18}/>} label="Equipa" />
      <NavItem icon={<BarChart3 size={18}/>} label="Análises" />
      <NavItem icon={<Newspaper size={18}/>} label="Adicionar Notícia" active />
      <NavItem icon={<Settings size={18}/>} label="Definições" />
      <NavItem icon={<HelpCircle size={18}/>} label="Ajuda" />
    </nav>

    {/* User Activity Feed */}
    <div className="mt-auto pt-6 border-t border-slate-200">
      <h4 className="text-[10px] font-bold uppercase text-slate-400 mb-4 px-2 tracking-widest">Atividade Recente</h4>
      <div className="space-y-3 px-2">
        <ActivityItem user="James Wilson" action="atualizou 'Mercado'" />
        <ActivityItem user="Sarah Johnson" action="criou 'Startups'" />
      </div>
    </div>
  </aside>
  );
};




// Componentes Auxiliares para Limpeza de Código
const NavItem = ({ icon, label, active = false }: { icon: any, label: string, active?: boolean }) => (
    <div className={`flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-all cursor-pointer ${
      active ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-500 hover:bg-slate-100'
    }`}>
      {icon}
      {label}
    </div>
  );
  
  const ActivityItem = ({ user, action }: { user: string, action: string }) => (
    <div className="flex gap-2">
      <div className="w-6 h-6 bg-slate-200 rounded-full shrink-0" />
      <p className="text-[10px] leading-tight text-slate-600">
        <span className="font-bold block text-slate-900">{user}</span> {action}
      </p>
    </div>
  );