import {
    FaGoogle,
    FaOdnoklassnikiSquare,
    FaVk,
    FaYandex,
} from 'react-icons/fa';
import { SiMaildotru } from 'react-icons/si';

import { Button } from '@/components/ui/button';
import {
    MobileBlock,
    MobileButton,
} from '@/components/ui/mobile';
import { useAppConfig } from '@/contexts/AppConfigContext';

import OrLine from './OrLine';

const SocialLoginButtons = ({ onSocAuth }: { onSocAuth: (type: string) => void }) => {
    const { auth, isMobile } = useAppConfig();


    if (!auth?.socialLogin) {
        return null;
    }

    if (isMobile) {
        return <MobileBlock outline> <div className="grid grid-cols-5 gap-2">

            <MobileButton

                outline
                large

                onClick={() => {
                    onSocAuth('vk');
                }}
            >
                <FaVk size={30} className=' text-blue-600' />
            </MobileButton>
            <MobileButton
                outline
                large
                onClick={() => {
                    onSocAuth('ya');
                }}
            >
                <FaYandex size={20} className=' text-red-600' />
            </MobileButton>
            <MobileButton
                outline
                large
                onClick={() => {
                    onSocAuth('google');
                }}
            >
                <FaGoogle size={20} className=' text-gray-600' />
            </MobileButton>
            <MobileButton
                outline
                large
                onClick={() => {
                    onSocAuth('ok');
                }}
            >
                <FaOdnoklassnikiSquare size={20} className=' text-orange-600' />
            </MobileButton>
            <MobileButton
                outline
                large
                onClick={() => {
                    onSocAuth('mailru');
                }}
            >
                <SiMaildotru size={20} className=' text-blue-600' />
            </MobileButton>
        </div>
        </MobileBlock>
    }


    return <>

        <OrLine />


        <div className="grid grid-cols-5 gap-2">
            <Button
                variant='outline'
                onClick={() => {
                    onSocAuth('vk');
                }}
            >
                <FaVk size={30} className=' text-blue-600' />
            </Button>

            <Button
                variant='outline'
                onClick={() => {
                    onSocAuth('ya');
                }}
            >
                <FaYandex size={20} className=' text-red-600' />
            </Button>

            <Button
                variant='outline'
                onClick={() => {
                    onSocAuth('google');
                }}
            >
                <FaGoogle size={20} className=' text-gray-600' />

            </Button>
            <Button
                variant='outline'
                onClick={() => {
                    onSocAuth('ok');
                }}
            >
                <FaOdnoklassnikiSquare size={20} className=' text-orange-600' />

            </Button>
            <Button
                variant='outline'
                onClick={() => {
                    onSocAuth('mailru');
                }}
            >
                <SiMaildotru size={20} className=' text-blue-600' />

            </Button>
        </div>




    </>
}

export default SocialLoginButtons;