import { providers } from '@/data/providers';
import { Button } from '@mui/material';
import { AnimatePresence, motion } from 'framer-motion';
import React, { useEffect, useState } from 'react'
import Iconify from '../Iconify';

const ProvidersButton = ({ 
    handlePageChange 
}: { 
    handlePageChange: (page: 'signin' | 'signup' | 'providers') => void 
}) => {
    const [currentProvider, setCurrentProvider] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentProvider((prev) => (prev + 1) % providers.length);
        }, 4000);
        return () => clearInterval(interval);
    }, [providers.length]);

    return (
        <Button
            onClick={() => handlePageChange('providers')}
            variant='contained'
            color='inherit'
            fullWidth
            sx={{
                background: 'background.paper',
                pr: '55px',
                zIndex: 2,
                transition: 'all 0.25s ease',
            }}>

            <AnimatePresence>
                <motion.span
                    key={currentProvider}
                    initial={{ opacity: 0, scale: 0 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0 }}
                    transition={{ duration: 0.25 }}
                    style={{
                        position: 'absolute',
                        left: 'calc(50% - 60px)',
                        transform: 'translateX(-50%)'
                    }}
                >
                    <Iconify icon={providers[currentProvider].icon} size={22} />
                </motion.span>
            </AnimatePresence>
            Use
            <AnimatePresence>
                <motion.span
                    key={currentProvider}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -20 }}
                    transition={{ duration: 0.25 }}
                    style={{
                        position: 'absolute',
                        left: 'calc(50% - 3px)',
                        transform: 'translateX(-50%)'
                    }}
                >
                    {providers[currentProvider].name}
                </motion.span>
            </AnimatePresence>
        </Button>
    )
}

export default ProvidersButton