import React, { useState } from 'react';
import { Dropdown, CnIcon, MenuButtonProps } from '@alife/cn-ui';
import OPButton from '../op-button';

import './index.scss';

export default function OPMenuButton(props: MenuButtonProps) {
  const { children, label } = props;

  const [visible, setVisible] = useState(false);

  const trigger = (
    <OPButton size='small' className='op-menu-button-trigger' type='secondary'>
      {label}
      <CnIcon
        type={visible ? 'triangle-up-fill' : 'triangle-down-fill'}
        size='large'
      />
    </OPButton>
  );

  return (
    <Dropdown
      trigger={trigger}
      triggerType={['click']}
      onVisibleChange={setVisible}
      cache
    >
      <div className='op-menu-button-dropdown'>{children}</div>
    </Dropdown>
  );
}