"use client";

import Link from "next/link";
import type { ReactNode } from "react";
import { TabList, TabPanel, Tabs } from "@unlocalhosted/metalui";
import { ExternalIcon } from "./icons";
import { Box } from "./ui";

export type DocTab = { label: string; href: string; content: ReactNode };

/** README, license and friends as MetalUI tabs over one raised plate. */
export function DocTabs({ tabs }: { tabs: DocTab[] }) {
  return (
    <section className="mt-6">
      <Tabs defaultValue={tabs[0]?.href}>
        <Box className="overflow-hidden">
          <div className="rule-b flex items-center gap-3 px-4 py-2.5">
            <TabList aria-label="Documents" size="compact" items={tabs.map((t) => ({ value: t.href, label: t.label }))} />
          </div>
          {tabs.map((t) => (
            <TabPanel key={t.href} value={t.href} className="relative px-5 py-6 md:px-8 md:py-8">
              <Link
                href={t.href}
                title="View file"
                aria-label={`View ${t.label}`}
                className="absolute top-3 right-3 flex size-7 items-center justify-center rounded-full text-ink3 transition-colors hover:recipe-icon-button-ghost-hover hover:text-ink focus-visible:focus-ring"
              >
                <ExternalIcon width={13} height={13} />
              </Link>
              {t.content}
            </TabPanel>
          ))}
        </Box>
      </Tabs>
    </section>
  );
}