import * as React from 'react';
import { Moon, Sun } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useColorMode } from '@/components/ui/ThemeProvider';
import { cn } from 'helpers/cn';

export const ModeToggle = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
  ({ className, ...props }, ref) => {
    const { colorMode, setColorMode } = useColorMode();

    return (
      <Button
        ref={ref}
        variant="outline"
        size="icon"
        onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
        className={cn('h-9 w-9', className)}
        {...props}
      >
        <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
        <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
        <span className="sr-only">Toggle color mode</span>
      </Button>
    );
  },
);
ModeToggle.displayName = 'ModeToggle';