'use client'
import { NextPage } from 'next'
import Image from 'next/image';
import LoginStep1 from './components/LoginStep1';
import { useAuthStore } from './store/AuthStore';
import { Messages1 } from 'iconsax-react';
import { clx } from '@/helpers/utils';

const LoginPage: NextPage = () => {

    const { step, phone } = useAuthStore()

    return (
        <div className='flex justify-center items-center min-h-screen p-4'>
            <div className='w-full max-w-4xl border border-border rounded-xl flex flex-col lg:flex-row p-4 sm:p-6 lg:p-10 gap-6 lg:gap-16 xl:gap-32'>
                <div className='flex-1'>
                    <div className='text-primary text-sm sm:text-base'>
                        {step}/2
                    </div>
                    <div className='w-full h-0.5 mt-4 flex items-center'>
                        <div className='size-2 rounded-full bg-primary'></div>
                        <div className='w-1/2 h-full bg-primary'></div>
                        <div className='size-2 rounded-full bg-primary'></div>

                        <div className={clx(
                            'w-1/2 h-full bg-primary/40',
                            step === 2 && 'bg-primary'
                        )}></div>
                        <div className={clx(
                            'size-2 rounded-full bg-primary/40',
                            step === 2 && 'bg-primary'
                        )}></div>
                    </div>

                    {
                        step === 1 ?
                            <div className='mt-8 sm:mt-12 lg:mt-20 flex flex-col sm:flex-row gap-4 sm:gap-6'>
                                <div className='flex justify-center sm:justify-start'>
                                    <Image
                                        src='/images/mobile.svg'
                                        width={60}
                                        height={98}
                                        alt='phone'
                                        className='sm:w-16 sm:h-[104px] lg:w-20 lg:h-[131px]'
                                    />
                                </div>

                                <div className='text-center sm:text-right'>
                                    <div className='text-[#8B8B8B] text-lg sm:text-xl'>Wellcome</div>
                                    <div className='mt-2 font-black text-2xl sm:text-3xl lg:text-4xl text-[#4F4F4F]'>
                                        خوش آمدید
                                    </div>
                                    <p className='mt-4 text-[#8B8B8B] text-xs sm:text-sm max-w-md mx-auto sm:mx-0'>
                                        برای دریافت کد فعالسازی شماره همراه یا ایمیل خود را وارد نمایید
                                    </p>
                                </div>
                            </div>
                            :
                            <div className='mt-8 sm:mt-12 lg:mt-20 flex flex-col sm:flex-row gap-4 sm:gap-6'>
                                <div className='flex justify-center sm:justify-start'>
                                    <Messages1 size={70} color='#CCCCCC' className='sm:w-20 sm:h-20 lg:w-[90px] lg:h-[90px]' />
                                </div>

                                <div className='text-center sm:text-right'>
                                    <div className='text-[#8B8B8B] text-lg sm:text-xl'>activation code</div>
                                    <div className='mt-2 font-black text-2xl sm:text-3xl lg:text-4xl text-[#4F4F4F]'>
                                        كد فعالسازی
                                    </div>
                                    <p className='mt-4 text-[#8B8B8B] text-xs sm:text-sm max-w-md mx-auto sm:mx-0'>
                                        کد فعالسازی به شماره همراه {phone} ارسال شد
                                    </p>
                                </div>
                            </div>
                    }
                </div>

                <div className='flex-1 min-w-0'>
                    <LoginStep1 />
                </div>
            </div>
        </div>
    )
}

export default LoginPage