"use client"

import React, { useState, useEffect } from "react"
import { useTheme } from "next-themes"
import { Sun, Moon } from "lucide-react"
import { cn } from "@/lib/utils"

export function ThemeToggle({ collapsed = false }: { collapsed?: boolean }) {
  const { resolvedTheme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  // Use consistent base classes for both buttons - only switch active state after mount
  const baseClasses = "flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-all"
  const activeClasses = "bg-background text-foreground shadow-sm"
  const inactiveClasses = "text-muted-foreground hover:text-foreground"

  // Pre-mount: render with neutral styling to avoid hydration mismatch
  const lightActive = mounted && resolvedTheme === "light"
  const darkActive = mounted && resolvedTheme === "dark"

  return (
    <div 
      className={cn("flex items-center gap-2 rounded-xl bg-secondary/40 p-1", collapsed ? "justify-center" : "")}
      suppressHydrationWarning
    >
     <button
  type="button"
  onClick={() => setTheme("light")}
  className={cn(baseClasses, lightActive ? activeClasses : inactiveClasses, "cursor-pointer dark:text-white")}
  title="Light mode"
  suppressHydrationWarning
>
  <Sun className="h-4 w-4 shrink-0" />
  {!collapsed && <span>Light</span>}
</button>
      <button
        type="button"
        onClick={() => setTheme("dark")}
        className={cn(baseClasses, darkActive ? activeClasses : inactiveClasses , "cursor-pointer dark:text-white")}
        title="Dark mode"
        suppressHydrationWarning
      >
        <Moon className="h-4 w-4 shrink-0" />
        {!collapsed && <span>Dark</span>}
      </button>
    </div>
  )
}