import React from 'react';
import { useButton } from 'react-aria';
import { OverlayTriggerStateContext } from 'react-aria-components';

import { Icon } from '../../Icon/Icon';
import { Text } from '../../Typography/Text/Text';

interface DropdownButtonModalSubmenuHeaderProps {
  label: string;
}

export const DropdownButtonModalSubmenuHeader: React.FC<DropdownButtonModalSubmenuHeaderProps> = ({
  label,
  ...rest
}) => {
  const overLayState = React.useContext(OverlayTriggerStateContext);

  const buttonRef = React.useRef<HTMLButtonElement>(null);
  const { buttonProps } = useButton(
    {
      onPress: overLayState ? overLayState.close : undefined,
    },
    buttonRef
  );

  return (
    <button {...rest} ref={buttonRef} {...buttonProps} className='dropdownButton__modalSubmenuHeader'>
      <Icon icon='shp-back' variant='primary' size='sm' />
      <Text align='center' appearance='h3'>
        {label}
      </Text>
    </button>
  );
};