'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 className="hidden sm:block">
      {hasMounted && theme === 'dark' ? (
        <Button
          variant="ghost"
          className="p-2 text-gray-50"
          onClick={() => setTheme('light')}
        >
          <Sun />
        </Button>
      ) : (
        <Button
          variant="ghost"
          className="p-2 text-gray-50"
          onClick={() => setTheme('dark')}
        >
          <Moon />
        </Button>
      )}
    </div>
  )
}
