import "./ArrowIcon.css";

export type ArrowIconDirection = "forward" | "backward";

export type ArrowIconProps = {
  /**
   * `forward` follows reading order - it points right in LTR and left in RTL,
   * which is what the Arabic home hero does. `backward` is the opposite, for
   * "previous" affordances such as pagination.
   */
  direction?: ArrowIconDirection;
  className?: string;
};

/**
 * The arrow that rides along with the CTA label ("Discover SHARP-ER ->").
 *
 * Purely decorative: the label next to it carries the meaning, so the element
 * is hidden from assistive technology. It paints in `currentColor`, so it takes
 * the colour of whatever button or link it sits in with no props.
 */
export function ArrowIcon({ direction = "forward", className }: ArrowIconProps) {
  return (
    <span
      aria-hidden="true"
      data-direction={direction}
      className={className ? `sh-arrow-icon ${className}` : "sh-arrow-icon"}
    >
      <span className="sh-arrow-icon__glyph" />
    </span>
  );
}