import { Sparkles, SlidersHorizontal } from "lucide-react"
import { useExpertMode, setExpertMode } from "@/lib/useExpertMode"
import { cn } from "@/lib/utils"

// Zwei-Zustand-Pille im Header: „Einfach" (aufgeräumt) ↔ „Experte" (alle Details).
export function ExpertToggle() {
  const expert = useExpertMode()
  return (
    <div
      className="flex items-center rounded-md border border-border/40 bg-background/40 p-0.5"
      role="group"
      aria-label="Ansichtsmodus"
      title="Einfach zeigt nur das Wichtigste. Experte zeigt alle technischen Details."
    >
      <button
        onClick={() => setExpertMode(false)}
        aria-pressed={!expert}
        className={cn(
          "flex items-center gap-1 rounded px-2 py-1 text-xs font-semibold transition-all cursor-pointer",
          !expert ? "bg-primary/15 text-primary shadow-sm" : "text-muted-foreground hover:text-foreground",
        )}
      >
        <Sparkles className="h-3.5 w-3.5" /> Einfach
      </button>
      <button
        onClick={() => setExpertMode(true)}
        aria-pressed={expert}
        className={cn(
          "flex items-center gap-1 rounded px-2 py-1 text-xs font-semibold transition-all cursor-pointer",
          expert ? "bg-primary/15 text-primary shadow-sm" : "text-muted-foreground hover:text-foreground",
        )}
      >
        <SlidersHorizontal className="h-3.5 w-3.5" /> Experte
      </button>
    </div>
  )
}