"use client"

import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useDashboardTheme } from "./DashboardThemeProvider"

import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

export function ThemeToggle() {
  const { theme, toggleTheme } = useDashboardTheme()

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="ghost" size="icon" onClick={toggleTheme} className="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Theme umschalten</span>
        </Button>
      </TooltipTrigger>
      <TooltipContent>Design umschalten</TooltipContent>
    </Tooltip>
  )
}