import Link, { LinkProps } from "next/link";
import { useRouter } from "next/router";
import React, { ElementType, FC } from "react";

import classNames from "@lib/classNames";

interface Props {
  tabs: {
    name: string;
    href: string;
    icon?: ElementType;
  }[];
  linkProps?: Omit<LinkProps, "href">;
}

const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
  const router = useRouter();
  return (
    <>
      <nav className="-mb-px flex space-x-2 sm:space-x-5" aria-label="Tabs">
        {tabs.map((tab) => {
          const isCurrent = router.asPath === tab.href;
          return (
            <Link {...linkProps} key={tab.name} href={tab.href}>
              <a
                className={classNames(
                  isCurrent
                    ? "border-neutral-900 text-neutral-900"
                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
                  "group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
                )}
                aria-current={isCurrent ? "page" : undefined}>
                {tab.icon && (
                  <tab.icon
                    className={classNames(
                      isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
                      "-ml-0.5 mr-2 h-5 w-5 hidden sm:inline-block"
                    )}
                    aria-hidden="true"
                  />
                )}
                <span>{tab.name}</span>
              </a>
            </Link>
          );
        })}
      </nav>
      <hr />
    </>
  );
};

export default NavTabs;