<?php

function renderTabs2Arrow($b, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $data = $element['data'];
  $user_data = $data['user_data'];
  $elMarkup = "";

  extract($user_data);

  $fontData = getFontData($user_data, "labelFont");
  $alignmentMap = array(
    "left" => "flex-start",
    "center" => "center",
    "right" => "flex-end"
  );

  $alignment = $user_data["alignment"];
  $prevIcon = useVar($user_data, "prevIconStyle", "previous");
  $nextIcon = useVar($user_data, "nextIconStyle", "next");

  $iconEl = '
    <i class="flo-flex-icon-'.($role === "next" ? $nextIcon : $prevIcon).'"></i>
  ';
  $textEl = '
    <div
      class="flex-element-type-tabs2-arrow__text"
      data-font="'.$fontData['dataFont'].'"
      style="'.$fontData['style'].'"
    >
      '.$label.'
    </div>'
  ;
  $toggle = $type === "icon" ? $iconEl : $textEl;

  $elMarkup .= '<div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--tabs2-arrow '.$custom_classes.'" style="'.$elStyles.'">
    <div
      class="flex-element-type-tabs2-arrow"
      style="
        --color: '.getStyleKitColor($color).';
        --color-hover:'.getStyleKitColor($colorHover).';
        --icon-size: '.remCalc($iconSize).';
        justify-content: '.$alignmentMap[$alignment].';
      "
      data-role="'.$role.'"
      data-selected-tabs-element="'.$selectedTabsElement.'"
      data-use-color-overrides="'.useVar($user_data, 'useColorOverrides', false).'"
    >
      '.$toggle.
    '</div>
  </div>';

  return $elMarkup;
}
