"use client"

import { cn } from "@/lib/utils"
import { Search, Heart, Clock, Star, Zap, LayoutGrid, Gamepad2, Award, Coins, Flame, Trophy } from "lucide-react"

export type GameCategory = 
  | "all" 
  | "search" 
  | "favourite" 
  | "recently-played" 
  | "most-popular" 
  | "harif-special" 
  | "for-you" 
  | "slots" 
  | "crash-games" 
  | "higher-lower" 
  | "smartsoft" 
  | "keno-spin" 
  | "pragmatic-play" 
  | "evoplay-bonus"

interface VirtualSidebarProps {
  activeCategory: GameCategory
  onCategoryChange: (category: GameCategory) => void
}

const categories = [
  { id: "all", name: "Virtual", icon: Star, subtitle: "Check out our games!", hasChevron: true },
  { id: "search", name: "Search", icon: Search },
  { id: "favourite", name: "Favourite", icon: Heart },
  { id: "recently-played", name: "Recently Played", icon: Clock },
  { id: "most-popular", name: "Most Popular", icon: Star },
  { id: "harif-special", name: "Harif Special", icon: Zap },
  { id: "for-you", name: "For You", icon: Star },
  { id: "slots", name: "Slots", icon: Star },
  { id: "crash-games", name: "Crash Games", icon: Star },
  { id: "higher-lower", name: "Higher Lower", icon: Star },
  { id: "smartsoft", name: "Smartsoft", icon: Star },
  { id: "keno-spin", name: "Keno & Spin", icon: Star },
  { id: "pragmatic-play", name: "Pragmatic Play", icon: Star },
  { id: "evoplay-bonus", name: "EvoPlay BONUS", icon: Star },
]

export function VirtualSidebar({ activeCategory, onCategoryChange }: VirtualSidebarProps) {
  return (
    <aside className="hidden h-full w-[240px] shrink-0 bg-brand-surface-light lg:block overflow-y-auto border-r border-border/40 scrollbar-hide">
      <div className="flex flex-col gap-[1px]">
        {categories.map((cat) => {
          const Icon = cat.icon
          const isActive = activeCategory === cat.id
          
          return (
            <button
              key={cat.id}
              onClick={() => onCategoryChange(cat.id as GameCategory)}
              className={cn(
                "w-full flex flex-col px-3 py-2 text-left transition-colors border-b border-border/5",
                isActive 
                  ? "bg-brand-surface border-l-4 border-l-brand-primary" 
                  : "bg-brand-surface-light hover:bg-brand-surface"
              )}
            >
              <div className="flex items-center justify-between w-full">
                <div className="flex items-center gap-3">
                  <Icon className={cn("size-4", isActive ? "text-brand-primary" : "text-white/60")} />
                  <div className="flex flex-col">
                    <span className={cn(
                      "text-[12px] font-bold tracking-tight",
                      isActive ? "text-white" : "text-white/80"
                    )}>
                      {cat.name}
                    </span>
                    {cat.subtitle && (
                      <span className="text-[9px] text-white/40 font-medium">{cat.subtitle}</span>
                    )}
                  </div>
                </div>
                {cat.hasChevron && (
                  <svg viewBox="0 0 24 24" className="size-3.5 fill-white/40"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
                )}
              </div>
            </button>
          )
        })}
      </div>
    </aside>
  )
}