'use client'

import useHasMounted from '@/hooks/useHasMounted'
import { Moon, Sun } from 'lucide-react'
import { useTheme } from 'next-themes'
import { Button } from './ui/button'

export function ThemeSwitcher() {
  const { setTheme, theme } = useTheme()
  const hasMounted = useHasMounted()

  return (
    <div>
      {hasMounted && theme === 'dark' ? (
        <Button variant="ghost" onClick={() => setTheme('light')}>
          <Moon />
        </Button>
      ) : (
        <Button variant="ghost" onClick={() => setTheme('dark')}>
          <Sun />
        </Button>
      )}
    </div>
  )
}
