'use client';

import type { ComponentProps } from 'react';
import { Moon, Sun } from 'lucide-react';
import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';

import { Button, cn } from '@gib/ui';

const ThemeProvider = ({
  children,
  ...props
}: ComponentProps<typeof NextThemesProvider>) => {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
};

interface ThemeToggleProps {
  size?: number;
  buttonProps?: Omit<ComponentProps<typeof Button>, 'onClick'>;
}

const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
  const { setTheme, resolvedTheme } = useTheme();
  return (
    <Button
      variant='outline'
      size='icon'
      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
      {...buttonProps}
      className={cn('cursor-pointer', buttonProps?.className)}
    >
      <Sun
        style={{ height: `${size}rem`, width: `${size}rem` }}
        className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
      />
      <Moon
        style={{ height: `${size}rem`, width: `${size}rem` }}
        className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
      />
      <span className='sr-only'>Toggle theme</span>
    </Button>
  );
};

export { ThemeProvider, ThemeToggle, type ThemeToggleProps };
