import type { CSSProperties, Ref } from "react";

interface ArrowProps {
  ref?: Ref<SVGSVGElement>;
  width?: number;
  className?: string;
  style?: CSSProperties;
}

export const Arrow = ({ ref, width = 20, className, style }: ArrowProps) => {
  const height = width / 2;
  return (
    <svg
      ref={ref}
      className={className}
      aria-hidden="true"
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      style={style}
    >
      <path d={`M0,0 H${width} L${width / 2},${height} Z`} />
    </svg>
  );
};
