import clsx from "clsx";

type Tab = "dashboard" | "scheduler" | "autopost" | "analytics" | "profiles" | "settings";

const tabs: { id: Tab; label: string; icon: string }[] = [
  { id: "dashboard", label: "Dashboard", icon: "fa-solid fa-house" },
  { id: "profiles", label: "My Profiles", icon: "fa-solid fa-users" },
  { id: "autopost", label: "Blog to Social", icon: "fa-solid fa-rotate" },
  { id: "scheduler", label: "Scheduler", icon: "fa-solid fa-pen-to-square" },
  { id: "analytics", label: "Analytics", icon: "fa-solid fa-chart-line" },
  { id: "settings", label: "", icon: "fa-solid fa-gear" },
];

interface Props {
  activeTab: Tab;
  onTabChange: (tab: Tab) => void;
}

export default function TabNavigation({ activeTab, onTabChange }: Props) {
  return (
    <div className="vr-flex vr-items-center vr-justify-between vr-bg-white vr-rounded-xl vr-border vr-border-gray-200 vr-shadow-sm vr-p-2.5 vr-mb-6">
      <div className="vr-flex vr-items-center vr-gap-2.5 vr-pl-2">
        <img
          src={`${viralyWP.pluginUrl}assets/images/viraly_logo.webp`}
          alt="Viraly"
          className="vr-h-7 vr-w-auto"
          onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
        />
      </div>

      <nav className="vr-flex vr-gap-1 vr-bg-gray-100 vr-rounded-lg vr-p-1">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={clsx(
              "vr-flex vr-items-center vr-gap-2 vr-px-3.5 vr-py-2 vr-rounded-md vr-text-sm vr-font-medium vr-transition-all vr-border-0 vr-cursor-pointer",
              activeTab === tab.id
                ? "vr-bg-white vr-text-primary-600 vr-shadow-sm"
                : "vr-text-gray-500 hover:vr-text-primary-600 vr-bg-transparent"
            )}
          >
            <i className={clsx(tab.icon, "vr-text-xs")} />
            <span className="vr-hidden sm:vr-inline">{tab.label}</span>
          </button>
        ))}
      </nav>
    </div>
  );
}