'use client'

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

type ThemeSwitcherProps = {
  className?: React.HTMLProps<HTMLElement>['className']
}

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

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