'use client'

import React from 'react'
import { useTenantSelection } from '@payloadcms/plugin-multi-tenant/client'
import './TenantBreadcrumb.scss'

/**
 * Custom Breadcrumb-Komponente die den aktuellen Tenant-Kontext anzeigt.
 * Wird in der Admin-Header-Leiste eingefügt.
 */
export const TenantBreadcrumb: React.FC = () => {
  const { selectedTenantID, options } = useTenantSelection()

  // Finde den aktuellen Tenant aus den Optionen
  const currentTenant = options?.find((opt) => opt.value === selectedTenantID)

  // Zeige nichts wenn kein Tenant ausgewählt oder nur ein Tenant verfügbar
  if (!selectedTenantID || !currentTenant || options.length <= 1) {
    return null
  }

  // Handle localized labels (Record<string, string>) or plain strings
  const displayLabel = typeof currentTenant.label === 'string'
    ? currentTenant.label
    : (currentTenant.label as Record<string, string>)?.de || (currentTenant.label as Record<string, string>)?.en || String(currentTenant.value)

  return (
    <div className="tenant-breadcrumb">
      <span className="tenant-breadcrumb__label">Aktiver Tenant:</span>
      <span className="tenant-breadcrumb__value">{displayLabel}</span>
    </div>
  )
}

export default TenantBreadcrumb