import Link from "next/link"
import { cn } from "cn"

import { source } from "@/lib/source"
import { BASES } from "@/registry/bases"

export function DocsBaseSwitcher({
  base,
  component,
  hrefPrefix = "/docs/components",
  className,
}: {
  base: string
  component: string
  hrefPrefix?: string
  className?: string
}) {
  const activeBase = BASES.find((baseItem) => base === baseItem.name)

  return (
    <div
      className={cn(
        "not-typeset inline-flex w-full items-center gap-6",
        className
      )}
    >
      {BASES.filter((baseItem) =>
        source.getPage([`components/${baseItem.name}/${component}`])
      ).map((baseItem) => (
        <Link
          key={baseItem.name}
          href={`${hrefPrefix}/${baseItem.name}/${component}`}
          data-active={base === baseItem.name}
          className="relative inline-flex items-center justify-center gap-1 pt-1 pb-0.5 text-base font-medium text-muted-foreground transition-colors after:absolute after:inset-x-0 after:bottom-[-4px] after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity hover:text-foreground data-[active=true]:text-foreground data-[active=true]:after:opacity-100"
        >
          {baseItem.title}
        </Link>
      ))}
      {activeBase?.meta?.logo && (
        <div
          className="ml-auto size-4 shrink-0 text-muted-foreground opacity-80 [&_svg]:size-4"
          dangerouslySetInnerHTML={{
            __html: activeBase.meta.logo,
          }}
        />
      )}
    </div>
  )
}