'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 h-screen'>
            <div className='h-[450px] w-[1000px] border border-border rounded-xl flex p-10 gap-32'>
                <div className='flex-1'>
                    <div className='text-primary'>
                        {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-20 flex gap-6'>
                                <Image
                                    src='/images/mobile.svg'
                                    width={80}
                                    height={131}
                                    alt='phone'
                                />

                                <div>
                                    <div className='text-[#8B8B8B] text-xl'>Wellcome</div>
                                    <div className='mt-2 font-black text-4xl text-[#4F4F4F]'>
                                        خوش آمدید
                                    </div>
                                    <p className='mt-4 text-[#8B8B8B] text-sm'>
                                        برای دریافت کد فعالسازی شماره همراه یا ایمیل خود را وارد نمایید
                                    </p>
                                </div>
                            </div>
                            :
                            <div className='mt-20 flex gap-6'>
                                <Messages1 size={90} color='#CCCCCC' />

                                <div>
                                    <div className='text-[#8B8B8B] text-xl'>activation code</div>
                                    <div className='mt-2 font-black text-4xl text-[#4F4F4F]'>
                                        كد فعالسازی
                                    </div>
                                    <p className='mt-4 text-[#8B8B8B] text-sm'>
                                        کد فعالسازی به شماره همراه {phone} ارسال شد
                                    </p>
                                </div>
                            </div>
                    }
                </div>

                <LoginStep1 />
            </div>
        </div>
    )
}

export default LoginPage