import { Building2, Network } from 'lucide-react';
import { cn } from '../_lib/utils';

interface ScopeCardProps {
  organization?: { name: string } | null;
  chapter?: { name: string } | null;
  /** Tailwind text color for the icons, e.g. text-blue-600 */
  accent?: string;
}

/**
 * Shows the tenancy scope (Organisation → Chapter) the current user
 * is operating within. Rendered in a portal sidebar below the brand.
 */
export function ScopeCard({ organization, chapter, accent = 'text-muted-foreground' }: ScopeCardProps) {
  if (!organization && !chapter) return null;

  return (
    <div className="mx-3 mt-3 rounded-lg border bg-card divide-y">
      {organization && (
        <div className="flex items-center gap-2.5 px-3 py-2">
          <Network className={cn('size-4 shrink-0', accent)} />
          <div className="min-w-0">
            <p className="text-[10px] uppercase tracking-wide text-muted-foreground leading-none">Organisation</p>
            <p className="text-sm font-medium truncate mt-0.5">{organization.name}</p>
          </div>
        </div>
      )}
      {chapter && (
        <div className="flex items-center gap-2.5 px-3 py-2">
          <Building2 className={cn('size-4 shrink-0', accent)} />
          <div className="min-w-0">
            <p className="text-[10px] uppercase tracking-wide text-muted-foreground leading-none">Chapter</p>
            <p className="text-sm font-medium truncate mt-0.5">{chapter.name}</p>
          </div>
        </div>
      )}
    </div>
  );
}