"use client"

import Link from "next/link"
import {
  Home,
  Pill,
  Users,
  FileText,
  MessageCircle,
  VolleyballIcon,
  Video,
  BookOpen,
  Images,
  TvMinimalPlay,
  Sun,
  Gamepad2,
  Table,
  ListChecks,
  FileQuestionIcon,
  Vote,
  TrendingUpDown
} from "lucide-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarSeparator,
} from "@/components/ui/sidebar"

// Menu items for the sidebar
const navItems = [
  {
    title: "Dashboard",
    href: "/dashboard",
    icon: Home,
  },

  {
    title: "Clubs",
    href: "/club",
    icon: VolleyballIcon,
  },

  {
    title: "News",
    href: "/news",
    icon: FileText,
  },

  {
    title: "Fanchat",
    href: "/fanchat",
    icon: MessageCircle,
  },

  {
    title: "Shorts",
    href: "/short",
    icon: TvMinimalPlay,
  },

  {
    title: "Stories",
    href: "/story",
    icon: BookOpen,
  },

  {
    title: "Gallery",
    href: "/gallery",
    icon: Images,
  },


  {
    title: "Videos",
    href: "/video",
    icon: Video,
  },


  {
    title: "Season",
    href: "/season",
    icon: Sun,
  },


  {
    title: "Fixtures",
    href: "/fixture",
    icon: Gamepad2,
  },

  {
    title: "Match Results",
    href: "/match-result",
    icon: ListChecks,
  },


  {
    title: "Standing",
    href: "/standing",
    icon: Table,
  },

  {
    title: "Quizes",
    href: "/quiz",
    icon: FileQuestionIcon,
  },

  {
    title: "Votes",
    href: "/vote",
    icon: Vote,
  },

  {
    title: "Predictions",
    href: "/prediction",
    icon: TrendingUpDown,
  },

  

  // {
  //   title: "Payment",
  //   href: "/payment",
  //   icon: DollarSign,
  // },
  {
    title: "Accounts",
    href: "/account",
    icon: Users,
  },

]

export function DashboardSidebar() {
  return (
    <Sidebar collapsible="icon" className="sidebar-data-item">
      <SidebarHeader>
        <Link href="#" className="flex items-center gap-2 px-2 py-4 text-lg font-semibold">
          <Pill className="h-6 w-6 text-primary" />
          <span className="group-data-[collapsible=icon]:hidden">KSA</span>
        </Link>
      </SidebarHeader>
      <SidebarSeparator />
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel className="group-data-[collapsible=icon]:hidden">Navigation</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {navItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild tooltip={item.title}>
                    <Link href={item.href}>
                      <item.icon />
                      <span className="group-data-[collapsible=icon]:hidden">{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}