import { IoMdPhonePortrait } from 'react-icons/io';

import { Button } from '@/components/ui/button';
import { MobileButton } from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import useAppConfigStore, { useAppConfig } from '@/stores/appConfig';

const PhoneLoginButton = ({ onClick }: { onClick: () => void }) => {

    const { isMobile } = useAppConfigStore();
    const { auth } = useAppConfig();

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

    if (isMobile) {
        return <div className=' mt-2'>
            <MobileButton

                outline

                className='w-full'
                onClick={onClick}

            ><span className='mr-2'><IoMdPhonePortrait /></span> {Lang.key('phoneLogin')}</MobileButton>

        </div>
    }

    return <>



        <Button

            variant='outline'

            className='w-full'
            onClick={onClick}

        ><span><IoMdPhonePortrait /></span>{Lang.key('phoneLogin')}</Button>
    </>
}

export default PhoneLoginButton;