import ArrowLeft from '../../assets/images/ArrowLeft.svg'
import products from '../../assets/images/productsBGblack.svg'
import sells from '../../assets/images/sellBGblack.svg'
import orders from '../../assets/images/ordersBGblack.svg'
import users from '../../assets/images/usersBGblack.svg'
import {Divider} from "@mui/material";
import ProfitState from "../../Components/common/ProfitState";
import {EnglishToPersian} from "../../helpers/EnglishToPersian";

export default function Dashboard() {
    return (
        <div className="flex flex-col lg:flex-row text-4xl w-full">
            <div className={'bg-1 rounded-lg border-[0.05rem] border-gray-200 mx-2 w-full'}>
                <div className={'flex justify-between items-center my-1'}>
                    <div className={'flex justify-center items-center mr-2'}>
                        <img src={products}/>
                        <p className={'text-[1rem] font-[Vazirmatn] mr-2'}>محصولات</p>
                    </div>
                    <img src={ArrowLeft} className={'ml-3'}/>
                </div>
                <Divider light={true} variant={'middle'} />
                <div className={'flex flex-col md:flex-row justify-start items-start mr-3'}>
                    <div className={'flex flex-row items-center lg:flex-col ml-5'}>
                        <div className={'text-[0.9rem] text-gray-500 font-[Vazirmatn]'}>اتمام موجودی</div>
                        <div className={'flex items-center justify-center'}>
                            <div className={'text-2xl mx-1 font-[Vazirmatn]'}>
                                {EnglishToPersian('120')}
                            </div>
                            {/*<ProfitState number={12}/>*/}
                        </div>
                    </div>
                    <div className={'flex flex-row items-center lg:flex-col'}>
                        <div className={'text-[0.9rem] text-gray-500 font-[Vazirmatn]'}>موجودی</div>
                        <div className={'flex items-center justify-center'}>
                            <div className={'text-2xl mx-1 font-[Vazirmatn]'}>
                                {EnglishToPersian('120')}
                            </div>
                            {/*<ProfitState number={12}/>*/}
                        </div>
                    </div>
                </div>
            </div>
            <div className={'bg-1 rounded-lg border-[0.05rem] border-gray-200 mx-2 w-full h-20'}>
                <div className={'flex justify-between items-center my-1'}>
                    <div className={'flex justify-center items-center mr-2'}>
                        <img src={sells}/>
                        <p className={'text-[1rem] font-[Vazirmatn] mr-2'}>فروش</p>
                    </div>
                    <img src={ArrowLeft} className={'ml-3'}/>
                </div>
                <Divider light={true} variant={'middle'} />
            </div>
            <div className={'bg-1 rounded-lg border-[0.05rem] border-gray-200 mx-2 w-full h-20'}>
                <div className={'flex justify-between items-center my-1'}>
                    <div className={'flex justify-center items-center mr-2'}>
                        <img src={orders}/>
                        <p className={'text-[1rem] font-[Vazirmatn] mr-2'}>سفارشات</p>
                    </div>
                    <img src={ArrowLeft} className={'ml-3'}/>
                </div>
                <Divider light={true} variant={'middle'} />
            </div>
            <div className={'bg-1 rounded-lg border-[0.05rem] border-gray-200 mx-2 w-full h-20'}>
                <div className={'flex justify-between items-center my-1'}>
                    <div className={'flex justify-center items-center mr-2'}>
                        <img src={users}/>
                        <p className={'text-[1rem] font-[Vazirmatn] mr-2'}>کاربران</p>
                    </div>
                    <img src={ArrowLeft} className={'ml-3'}/>
                </div>
                <Divider light={true} variant={'middle'} />
            </div>
        </div>
    );
}
