import { FaMoon, FaSun } from 'react-icons/fa';
import { useTheme } from './ThemeContext'; 
import React from 'react';

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <button
      onClick={toggleTheme}
      className="bg-transparent border-none cursor-pointer p-2 rounded-full
                 transition duration-500 ease-in-out transform hover:scale-110
                 focus:outline-none"
      style={{ position: 'relative', display: 'inline-block', width: '50px', height: '50px' }}
    >
      <div
        className="absolute"
        style={{
          transition: 'opacity 500ms ease-in-out',
          opacity: theme === 'light' ? 1 : 0,
          position: 'absolute',
          inset: 0,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <FaMoon className="text-xl text-blue-500" />
      </div>
      <div
        className="absolute"
        style={{
          transition: 'opacity 500ms ease-in-out',
          opacity: theme === 'dark' ? 1 : 0,
          position: 'absolute',
          inset: 0,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <FaSun className="text-xl text-blue-300" />
      </div>
    </button>
  );
};

export default ThemeToggleButton;