'use client';

import * as React from 'react';
import { IconButton, Tooltip, useTheme } from '@mui/material';
import { Moon as MoonIcon } from '@phosphor-icons/react/dist/ssr/Moon';
import { Sun as SunIcon } from '@phosphor-icons/react/dist/ssr/Sun';

import { useThemeContext } from '@/contexts/theme-context';

export function ThemeSwitch(): React.JSX.Element {
  const theme = useTheme();
  const { colorScheme, toggleColorScheme } = useThemeContext();

  const isDark = colorScheme === 'dark';

  return (
    <Tooltip title={`Switch to ${isDark ? 'light' : 'dark'} mode`}>
      <IconButton
        onClick={toggleColorScheme}
        sx={{
          color: 'text.primary',
          bgcolor: 'background.paper',
          border: '1px solid',
          borderColor: 'divider',
          '&:hover': {
            bgcolor: 'action.hover',
            transform: 'scale(1.05)',
          },
          transition: 'all 0.2s ease-in-out',
        }}
      >
        {isDark ? (
          <SunIcon size={20} weight="duotone" />
        ) : (
          <MoonIcon size={20} weight="duotone" />
        )}
      </IconButton>
    </Tooltip>
  );
}