"use client";

import Link from "next/link";
import type { ReactNode } from "react";

import { cn } from "@/lib/utils";
import { customerUrl } from "@/lib/tenant";

type HeaderPreferenceBadgeProps = {
  tenant: string;
  hrefPath: string;
  title: string;
  children: ReactNode;
  className?: string;
  /** When set, overrides the default muted badge look (e.g. AUM Net emerald). */
  toneClassName?: string;
};

const BASE_CLASS =
  "hidden h-8 items-center rounded-lg border px-2.5 text-xs font-medium tracking-wide transition-colors sm:inline-flex";

const DEFAULT_TONE =
  "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground";

/**
 * Shared header chip that deep-links into a Settings section.
 * Visibility is the caller's responsibility (Roles / settings-section gates).
 */
export function HeaderPreferenceBadge({
  tenant,
  hrefPath,
  title,
  children,
  className,
  toneClassName = DEFAULT_TONE,
}: HeaderPreferenceBadgeProps) {
  return (
    <Link
      href={customerUrl(tenant, hrefPath)}
      title={title}
      className={cn(BASE_CLASS, toneClassName, className)}
    >
      {children}
    </Link>
  );
}