'use client';

import type { ComponentProps } from 'react';
import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
import { Moon, Sun } from 'lucide-react';
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 };