import _extends from "@babel/runtime/helpers/extends";
/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import { N200, N400 } from '@atlaskit/theme/colors';
import { messages } from './messages';
const captionWrapperStyle = css({
  marginTop: "var(--ds-space-100, 8px)",
  textAlign: 'center',
  position: 'relative',
  color: `var(--ds-text-subtle, ${N400})`
});
const placeholderStyle = css({
  color: `var(--ds-text-subtlest, ${N200})`,
  position: 'absolute',
  top: 0,
  width: '100%'
});
export class CaptionComponent extends React.Component {
  render() {
    const {
      selected,
      hasContent,
      children,
      dataAttributes,
      intl: {
        formatMessage
      }
    } = this.props;
    const showPlaceholder = !selected && !hasContent;
    return jsx("div", _extends({
      "data-media-caption": true,
      "data-testid": "media-caption"
    }, dataAttributes, {
      css: captionWrapperStyle
    }), showPlaceholder ? jsx("p", {
      css: placeholderStyle
    }, formatMessage(messages.placeholder)) : null, children);
  }
}
export default injectIntl(CaptionComponent);