import styles from './index.less';

type WorkArrowProps = {
  width?: number;
  height?: number;
  x: number;
  y: number;
  arrowLeft: number;
  arrorwTop: number;
  borderLeft?: number;
  borderTop?: number;
  borderRight?: number;
  borderBottom?: number;
  arrrowAngle?: number;
};

function WorkArrow({
  width = 1,
  height = 1,
  x,
  y,
  arrowLeft,
  arrorwTop,
  borderLeft = 0,
  borderTop = 0,
  borderRight = 0,
  borderBottom = 0,
  arrrowAngle = 0,
}: WorkArrowProps) {
  return (
    <div
      className={styles['work-arrow']}
      style={{
        left: `${x}px`,
        top: `${y}px`,
        width: `${width}px`,
        height: `${height}px`,
        borderLeftWidth: `${borderLeft}px`,
        borderTopWidth: `${borderTop}px`,
        borderRightWidth: `${borderRight}px`,
        borderBottomWidth: `${borderBottom}px`,
      }}
    >
      <img
        className={styles['work-arrow__img']}
        src={require('@/assets/img/blue-triangle.png')}
        alt=""
        width={10}
        height={9}
        style={{
          left: `${arrowLeft}px`,
          top: `${arrorwTop}px`,
          transform: `rotate(${arrrowAngle}deg)`,
        }}
      />
    </div>
  );
}

export default WorkArrow;