import { Link } from "@tanstack/react-router";

export type Props = {
  title: React.ReactNode;
  navigation: React.ReactNode;
  tabs: React.ReactNode[];
  content: React.ReactNode;
  flyout?: React.ReactNode;
};
export function TabbedLayout({
  navigation,
  title,
  tabs,
  content,
  flyout,
}: Props) {
  return (
    <div>
      <div className="">
        <div>{navigation}</div>
        <div>{title}</div>
      </div>
      <div className="flex flex-row justify-start m-2 max-w-5xl">
        <div className="grow max-w-2xs p-0">{tabs}</div>
        <div
          className={`grow p-2 bg-slate-800 border-t border-b border-r border-slate-700`}
        >
          {content}
        </div>
        {flyout && (
          <div
            className="w-lg p-2 bg-slate-800 border border-slate-700 shadow-[0_0_15px_0_rgba(0,0,0,0.5)]"
            style={{
              "margin-left": "-32rem",
            }}
          >
            {flyout}
          </div>
        )}
      </div>
    </div>
  );
}

export type TabProps = {
  label: string;
  to: string;
  params: Record<string, any>;
  active?: boolean;
};

const activeTabClass =
  "text-slate-100 font-bold bg-slate-800 border-t border-b border-l";
const inactiveTabClass = "text-slate-300 bg-slate-900 border";

export function Tab({ label, to, params, active }: TabProps) {
  return (
    <Link
      key={label}
      to={to}
      params={params}
      className={`block p-2 border-slate-700 whitespace-nowrap ${active ? activeTabClass : inactiveTabClass}`}
    >
      {label}
    </Link>
  );
}