"use client";

import { Filter } from "lucide-react";

import { usePortfolioScopeLabel } from "@/app/customer/_lib/admin/use-portfolio-scope-label";
import { cn } from "@/lib/utils";

type PortfolioScopeWidgetHintProps = {
  className?: string;
  inline?: boolean;
};

export function PortfolioScopeWidgetHint({ className, inline = false }: PortfolioScopeWidgetHintProps) {
  const { label, visible, loading } = usePortfolioScopeLabel();

  if (!visible || loading || !label) {
    return null;
  }

  const content = (
    <>
      <Filter className="size-3 shrink-0" aria-hidden />
      <span className="truncate">
        <span className="font-medium text-foreground/80">Scope:</span> {label}
      </span>
    </>
  );

  if (inline) {
    return (
      <>
        <span className="shrink-0 text-border" aria-hidden>
          ·
        </span>
        <span
          className={cn("inline-flex min-w-0 items-center gap-1 truncate", className)}
          title={label}
        >
          {content}
        </span>
      </>
    );
  }

  return (
    <p
      className={cn("flex min-w-0 items-center gap-1 text-[10px] text-muted-foreground", className)}
      title={label}
    >
      {content}
    </p>
  );
}