import { onboardingTabs } from "./types";

export default function OnboardingTabs({
  id,
  title,
  subtitle,
  status,
}: onboardingTabs) {
  const tabStyle = {
    complete: "border-azure-blue",
    current: "border-azure-blue text-azure-blue",
    upcoming: "text-gray-400",
  };

  return (
    <>
      {status === "complete" ? (
        <button
          className={`${tabStyle[status]} group flex flex-1 grow flex-col border-t-4 pt-2 text-left`}
          id={id}
          name={id}
        >
          <span className="text-xs">{subtitle}</span>
          <span className="text-base/4 font-medium">{title}</span>
        </button>
      ) : status === "current" ? (
        <button
          className={`${tabStyle[status]} group flex flex-1 grow flex-col border-t-4 pt-2 text-left`}
          id={id}
          name={id}
        >
          <span className="text-xs">{subtitle}</span>
          <span className="text-base/4 font-medium">{title}</span>
        </button>
      ) : status === "upcoming" ? (
        <button
          className={`${tabStyle[status]} group flex flex-1 grow flex-col border-t-4 pt-2 text-left`}
          id={id}
          name={id}
          disabled
        >
          <span className="text-xs">{subtitle}</span>
          <span className="text-base/5 font-medium">{title}</span>
        </button>
      ) : null}
    </>
  );
}