import {styled} from 'styled-components'
import {Dropdown} from 'antd'
import {LogoutOutlined} from '@ant-design/icons'
import useI18NPrefix from '../hooks/useI18NPrefix.js'
import {forwardRef, memo} from 'react';

const component = forwardRef((props,ref)=> {
  const t = useI18NPrefix('global');
  const items = [
    {
      key: 'logout',
      label: t('logout'),
      icon: <LogoutOutlined/>,
    }
  ];
  return (
    <Dropdown
      placement="rightBottom"
      arrow={false}
      trigger='click'
      menu={{
        items,
        expandIcon: false,
        triggerSubMenuAction: 'click',
        onClick: props?.onSelect
      }}
    >
      <Container ref={ref}>{props?.children}</Container>
    </Dropdown>
  )
})

const Container = styled.div`
  z-index: 999;
`
export const AvatarPanel = memo(component)
