'use client';

import { Button } from '@components';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
import { LuMoon, LuSun } from 'react-icons/lu';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  const toggleTheme = () => {
    setTheme(theme === 'dark' ? 'light' : 'dark');
  };

  return (
    <Button
      variant="bordered"
      size="icon"
      onClick={toggleTheme}
      className="focus-visible:ring-0 cursor-pointer"
    >
      {theme === 'dark' ? (
        <LuSun className="h-[1.2rem] w-[1.2rem]" />
      ) : (
        <LuMoon className="h-[1.2rem] w-[1.2rem]" />
      )}
      <span className="sr-only">Toggle theme</span>
    </Button>
  );
}