import React from 'react';
import Arrange from 'terra-arrange';
import classNames from 'classnames/bind';
import Status from 'terra-status';
import styles from '../../doc/status/example/colors.module.scss';

const cx = classNames.bind(styles);

const base64ImgSrc = 'data:image/png;base64,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';
const image = <img className={cx('image-wrapper')} height="150" width="300" src={base64ImgSrc} alt="placeholder" />;
const simpleText = <div className={cx('text-wrapper')}>Sample text</div>;

const StatusArrange = () => (
  <div>
    <Status colorClass={cx(['attention'])} visuallyHiddenText="Status Attention">
      <Arrange id="statusArrange" fitStart={image} fill={simpleText} alignFill="center" />
    </Status>
  </div>
);

export default StatusArrange;
