'use client'

import * as React from "react"
import { useTheme } from "next-themes"

import { Button } from "~/components/ui/button"
import ThemeIcon from "./ThemeIcon"

export function ThemeSwitch() {
  const { setTheme, theme } = useTheme()
  if (!theme) {
    setTheme('dark')
  }
  const toggleTheme = () => {
    setTheme(theme == "dark" ? "light" : "dark")
  }
  return (
    <>
      <Button className="flex h-9 lg:h-full w-20 lg:w-12" variant="outline" size="icon" onClick={toggleTheme}>
        <ThemeIcon activeTheme={theme}/>
        <span className="sr-only">Toggle theme</span>
      </Button>
    </>
  )
}