import React from 'react';

import { Button } from '../../Button/Button';
import { IconButton } from '../../IconButton/IconButton';
import { Tooltip } from '../../Tooltip/Tooltip';

export interface FileInputButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  tooltip?: React.ReactNode;
}

export const FileInputButton = React.forwardRef<HTMLButtonElement, FileInputButtonProps>(
  ({ tooltip, ...buttonProps }, ref) => (
    <div className='fileField__button'>
      <Button ref={ref} {...buttonProps} />
      {tooltip && (
        <Tooltip content={tooltip}>
          <IconButton ghost icon='shp-info' />
        </Tooltip>
      )}
    </div>
  )
);

FileInputButton.displayName = 'FileInputButton';