"use client";

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

import Link from "next/link";
import { School, Settings, User, GraduationCap, Award, Users, Clock, BookOpen, Home } from "lucide-react";

const SidebarContent = () => {
  return (
    <Command className="bg-background border-r h-full">
      <CommandList className="overflow-visible">
        <CommandGroup heading="Dashboard PODIF" className="mt-2">      
          <Link href="/" className="w-full no-underline cursor-pointer">
            <CommandItem className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors cursor-pointer">
              <Home className="h-4 w-4" />
              <span>Dashboard</span>
            </CommandItem>
          </Link>
        </CommandGroup>
        <CommandGroup heading="Menu Utama">
          <CommandItem className="p-0">
            <Accordion type="single" collapsible defaultValue="data-mahasiswa" className="w-full">
              <AccordionItem value="data-mahasiswa" className="border-none">
                <AccordionTrigger className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
                  <div className="flex items-center">
                    <School className="mr-2 h-4 w-4" />
                    <span>Data Mahasiswa</span>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="pl-6 flex flex-col space-y-1">
                    <Link href="/mahasiswa/total" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <Users className="mr-2 h-4 w-4" />
                      <span>Mahasiswa Total</span>
                    </Link>
                    <Link href="/mahasiswa/status" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <GraduationCap className="mr-2 h-4 w-4" />
                      <span>Mahasiswa Status</span>
                    </Link>
                    <Link href="/mahasiswa/lulustepatwaktu" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <Clock className="mr-2 h-4 w-4" />
                      <span>Mahasiswa Lulus Tepat Waktu</span>
                    </Link>
                    <Link href="/mahasiswa/beasiswa" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <BookOpen className="mr-2 h-4 w-4" />
                      <span>Mahasiswa Beasiswa</span>
                    </Link>
                    <Link href="/mahasiswa/berprestasi" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <Award className="mr-2 h-4 w-4" />
                      <span>Mahasiswa Berprestasi</span>
                    </Link>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Data Diri">
          <Link href="/mahasiswa/profile" className="w-full no-underline cursor-pointer" style={{ cursor: 'pointer' }}>
            <CommandItem className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors cursor-pointer">
              <User className="h-4 w-4" />
              <span>Profile</span>
            </CommandItem>
          </Link>
        </CommandGroup>
      </CommandList>
    </Command>
  );
};

export default SidebarContent; 