const tabs = [
  {
    id: "overview",
    label: "Übersicht",
  },
  {
    id: "documents",
    label: "Dokumente",
  },
  {
    id: "contracts",
    label: "Verträge",
  },
  {
    id: "assignments",
    label: "Einsätze",
  },
];

export default function EmployeeTabs({
  activeTab = "overview",
  onChange,
  hiddenTabIds = [],
}) {
  return (
    <div
      className="employee-tabs"
      role="tablist"
      aria-label="Bereiche der Personalakte"
    >
      {tabs.filter((tab) => !hiddenTabIds.includes(tab.id)).map((tab) => {
        const isActive = activeTab === tab.id;

        return (
          <button
            key={tab.id}
            type="button"
            role="tab"
            aria-selected={isActive}
            className={
              isActive
                ? "employee-tab employee-tab--active"
                : "employee-tab"
            }
            onClick={() => onChange?.(tab.id)}
          >
            {tab.label}
          </button>
        );
      })}
    </div>
  );
}