import { useState } from 'react';
import { Button, Popover } from '@mui/material';
import ArrowBottomHD from '@/components/icons/ArrowBottomHD';
import ProfilePA from '@/components/icons/ProfilePA';
import LogoutP from '@/components/icons/LogoutP';
import SettingPA from '@/components/icons/SettingPA';
import CardDA from '@/components/icons/CardDA';
import Image from 'next/image';

function MenuProfile({ data }) {

    const [anchorEl, setAnchorEl] = useState(null);

    const handleClick = (event) => setAnchorEl(event.currentTarget);
    const handleClose = () => setAnchorEl(null);

    const open = Boolean(anchorEl);
    const id = open ? 'simple-popover' : undefined;

    return (
        <>
            <Image
                className='flex md:hidden w-[32px] h-[32px] rounded-full'
                src={data.src}
                alt='profile'
                height={32}
                width={32}
            />
            <Button
                variant='text'
                onClick={handleClick}
                className='!hidden md:!flex !items-start !justify-center !gap-[8px] !p-1'
            >
                <Image
                    className='w-[48px] h-[48px] rounded-full'
                    src={data.src}
                    alt='profile'
                    height={48}
                    width={48}
                />
                <div className='flex flex-col items-start justify-between gap-[3px]'>
                    <p className='text-[#3B3B3B] text-[14px] font-semibold'>{data.name}</p>
                    <p className='text-[#7E7E7E] text-[12px] font-normal'>{data.expertise}</p>
                </div>
                <div className='mr-[4px]'>
                    <ArrowBottomHD />
                </div>
            </Button>
            <Popover
                id={id}
                open={open}
                anchorEl={anchorEl}
                onClose={handleClose}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left',
                }}
            >
                <div
                    className='flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]'
                >
                    <Button
                        fullWidth
                        variant='text'
                        className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
                    >
                        <ProfilePA />
                        پروفایل من
                    </Button>
                    <Button
                        fullWidth
                        variant='text'
                        className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
                    >
                        <CardDA />
                        پرداخت ها
                    </Button>
                    <Button
                        fullWidth
                        variant='text'
                        className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
                    >
                        <SettingPA />
                        تنظیمات
                    </Button>
                    <Button
                        fullWidth
                        color='error'
                        variant='contained'
                        onClick={handleClose}
                        sx={{
                            '&.MuiButtonBase-root': {
                                paddingTop: '8px !important',
                                paddingBottom: '8px !important'
                            },
                        }}
                        className='!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]'
                    >
                        <LogoutP />
                        خروج
                    </Button>
                </div>
            </Popover>
        </>
    )
}

export default MenuProfile