// @flow
import React from 'react';
import { Span } from '../span';
import { UnstyledButton } from '../../behaviors/unstyled-button';
import type { ClickableSpanProps } from './clickable-span.proptypes';

export const ClickableSpan = ({
  children,
  onClick,
  ...clickableSpanProps
}: ClickableSpanProps) => (
  <UnstyledButton onClick={onClick} {...clickableSpanProps}>
    <Span {...clickableSpanProps}>{children}</Span>
  </UnstyledButton>
);

ClickableSpan.displayName = 'ClickableSpan';
