import React, { useContext } from 'react';
import { ThemeContext } from '../App';

const ModeToggle: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div
      onClick={toggleTheme}
      className="fixed top-[30px] right-[30px] w-20 h-10 bg-gray-500/20 rounded-full cursor-pointer z-[1001] backdrop-blur-md border border-gray-500/30 transition-all duration-300"
    >
      <span
        className={`absolute top-1/2 -translate-y-1/2 text-xl transition-all duration-300 ${
          theme === 'dark' ? 'left-2' : 'left-11'
        }`}
      >
        {theme === 'dark' ? '🌙' : '☀️'}
      </span>
    </div>
  );
};

export default ModeToggle;