import React from "react";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { useThemeClass } from "../Theme";
import { getActiveClasses } from "../utility/active-classes";

interface Props {
  value: any;
  onChange: (newTab: any) => void;
  options: string[];
}

export default function AcceloTabs({ onChange, value, options }: Props) {
  const themeClass = useThemeClass();

  return (
    <div className="auik-mb-5 auik-relative">
      <Tabs
        onChange={(e, newVal) => onChange(newVal)}
        value={value}
        className="auik-min-h-0"
        TabIndicatorProps={{
          className: "auik-bg-blue-500 auik-h-0.5 auik-z-10"
        }}
      >
        {options.map(option => (
          <Tab
            key={option}
            disableRipple
            className={getActiveClasses([
              "auik-px-2 auik-leading-none auik-min-h-0 auik-min-w-0 auik-text-sm focus:auik-opacity-100",
              themeClass
            ])}
            label={option}
          />
        ))}
      </Tabs>
      <div className="auik-z-0 auik-border-0 auik-border-b auik-border-blue-800 auik-border-solid auik-absolute auik-bottom-0 auik-right-0 auik-left-0" />
    </div>
  );
}