import { CaretRightOutlined } from '@ant-design/icons';
import type { CSSProperties } from 'react';
import { useIntl } from 'umi';

const styles: {
  /** 箭头包装器 */
  wrapper: CSSProperties;
  /** 箭头图标 */
  icon: CSSProperties;
  /** 箭头文本 */
  text: CSSProperties;
  /** 箭头线段 */
  line: CSSProperties;
} = {
  wrapper: {
    position: 'relative',
    width: 60,
    height: 25,
  },
  icon: {
    position: 'absolute',
    width: 14,
    height: 14,
    right: -5,
    bottom: 0,
    fontSize: 14,
    color: 'rgb(210,210,210)',
  },
  text: {
    position: 'absolute',
    width: 60,
    height: 17,
    left: 0,
    top: 0,
    textAlign: 'center',
    fontSize: 11,
    color: '#F16622',
  },
  line: {
    position: 'absolute',
    width: 60,
    height: 2,
    left: 0,
    top: 17,
    backgroundColor: 'rgb(210,210,210)',
  },
};

export interface ArrowProps {
  text?: string;
}

const Arrow = (props: ArrowProps) => {
  const { text } = props;

  const { formatMessage } = useIntl();

  return (
    <div style={styles.wrapper}>
      <div style={styles.text}>{text ?? formatMessage({ id: 'component.AuditPassOn.title' })}</div>
      <div style={styles.line} />
      <CaretRightOutlined style={styles.icon} />
    </div>
  );
};

export default Arrow;