import { Settings } from 'lucide-react';
import { useState, useEffect } from 'react';
import SettingsDialogue from './SettingsDialogue';
import { AnimatePresence } from 'framer-motion';
import { getStoredAuthToken } from '@/lib/auth-client';

const SettingsButtonMobile = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [token, setToken] = useState<string | null>(null);
  useEffect(() => {
    setToken(getStoredAuthToken());
  }, [isOpen]);

  return (
    <>
      <button className="lg:hidden" onClick={() => setIsOpen(true)}>
        <Settings size={18} />
      </button>
      <AnimatePresence>
        {isOpen && <SettingsDialogue isOpen={isOpen} setIsOpen={setIsOpen} token={token} />}
      </AnimatePresence>
    </>
  );
};

export default SettingsButtonMobile;
