import {
  Building2,
  Calendar,
  FileText,
  LayoutDashboard,
  LogOut,
  Music,
  Settings,
  Users,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";

const navItems = [
  { icon: LayoutDashboard, label: "Overview", path: "/" },
  { icon: Users, label: "People", path: "#people" },
  { icon: Calendar, label: "Worship & Events", path: "#events" },
  { icon: Music, label: "Music & Media", path: "#music" },
  { icon: FileText, label: "Changes & Logs", path: "#logs" },
  { icon: Settings, label: "Settings", path: "#settings" },
];

type SidebarProps = {
  open?: boolean;
  close: () => void;
};

const Sidebar: React.FC<SidebarProps> = ({ open, close }) => {
  const pathName = usePathname();

  return (
    <aside
      data-cmp="Sidebar"
      className={`side-bar border-border fixed top-0 left-0 z-30 h-screen w-64 flex-col border-r md:flex ${open ? "flex" : "hidden"}`}
    >
      <div className="border-border border-b p-6">
        <div className="flex items-center space-x-3">
          <div className="bg-primary flex h-8 w-8 items-center justify-center rounded-lg">
            <Building2 className="text-primary-foreground h-5 w-5" />
          </div>
          <span className="from-primary bg-gradient-to-r to-purple-600 bg-clip-text text-xl font-bold text-transparent">
            CGR Admin
          </span>
        </div>
      </div>

      <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-6">
        {navItems.map((item) => {
          const isActive = pathName === item.path;
          return (
            <Link
              key={item.label}
              href={item.path}
              className={`flex items-center space-x-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
                isActive
                  ? "bg-primary/10 text-primary"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
              }`}
              onClick={() => {
                if (open) {
                  close();
                }
              }}
            >
              <item.icon
                className={`h-5 w-5 ${isActive ? "text-primary" : ""}`}
              />
              <span>{item.label}</span>
            </Link>
          );
        })}
      </nav>

      <div className="border-border border-t p-4">
        <button className="text-destructive hover:bg-destructive/10 flex w-full items-center space-x-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors">
          <LogOut className="h-5 w-5" />
          <span>Sign Out</span>
        </button>
      </div>
    </aside>
  );
};

export default Sidebar;