import * as React from "react";

export interface TabBarItem {
  key: string;
  label: string;
  icon: React.ReactNode;
}

export interface TabBarProps {
  items: TabBarItem[];
  activeKey: string;
  onChange: (key: string) => void;
  /** Hide labels, enlarge icons (the source app's ".ohne" variant). */
  iconOnly?: boolean;
  className?: string;
}

export function TabBar({ items, activeKey, onChange, iconOnly, className }: TabBarProps) {
  const classes = ["ads-tabbar"];
  if (iconOnly) classes.push("ads-tabbar--ohne");
  if (className) classes.push(className);
  return (
    <nav
      className={classes.join(" ")}
      style={{ gridTemplateColumns: `repeat(${items.length}, 1fr)` }}
    >
      {items.map((item) => (
        <button
          key={item.key}
          type="button"
          className={item.key === activeKey ? "ads-tab ads-tab--on" : "ads-tab"}
          onClick={() => onChange(item.key)}
        >
          <span className="ads-tab__icon">{item.icon}</span>
          {!iconOnly && <span className="ads-tab__label">{item.label}</span>}
        </button>
      ))}
    </nav>
  );
}
