"use client";

import { Flame, Settings } from "lucide-react";
import { cn } from "@/lib/utils";

interface ServerSidebarProps {
  className?: string;
}

export function ServerSidebar({ className }: ServerSidebarProps) {
  return (
    <div
      className={cn(
        "w-[72px] flex flex-col items-center py-3 gap-2",
        className
      )}
      style={{ backgroundColor: "#0b0e11" }}
    >
      {/* Logo */}
      <div className="relative group">
        <div
          className="w-12 h-12 rounded-2xl flex items-center justify-center cursor-pointer transition-all duration-200 hover:rounded-xl"
          style={{ backgroundColor: "#ff6d5a" }}
        >
          <Flame className="w-6 h-6 text-white" />
        </div>
        {/* Active indicator */}
        <div
          className="absolute left-[-16px] top-1/2 -translate-y-1/2 w-1 h-10 rounded-r-full"
          style={{ backgroundColor: "#ffffff" }}
        />
        {/* Tooltip */}
        <div className="absolute left-[60px] top-1/2 -translate-y-1/2 bg-black text-white text-sm px-3 py-1.5 rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 shadow-lg">
          LocalBosses AI
        </div>
      </div>

      {/* Divider */}
      <div
        className="w-8 h-[2px] rounded-full my-1"
        style={{ backgroundColor: "#2f3136" }}
      />

      {/* Spacer */}
      <div className="flex-1" />

      {/* Settings */}
      <div className="relative group">
        <div
          className="w-12 h-12 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200 hover:rounded-xl"
          style={{ backgroundColor: "#23272e" }}
        >
          <Settings className="w-5 h-5" style={{ color: "#96989d" }} />
        </div>
        <div className="absolute left-[60px] top-1/2 -translate-y-1/2 bg-black text-white text-sm px-3 py-1.5 rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 shadow-lg">
          Settings
        </div>
      </div>
    </div>
  );
}
