import React, { useMemo } from 'react';
import classNames from 'classnames';
import Styles from './style.less';

export default (props) => {
  const classList = useMemo(() => {
    return classNames(
      Styles.attchment,
      Styles['bt-border'],
      Styles['bt-pointer'],
      Styles['bt-slash'],
      {
        [Styles['rht-pointer']]: props.direct === 'left',
        [Styles['attchment-right']]: props.direct === 'right',
        [Styles['rht-slash']]: props.direct === 'right',
      },
    );
  }, [props.direct]);

  return <div className={classList}>{props.title}</div>;
};