import React from 'react'

import {
  emptyOrganizationTenantSummary,
  OrganizationTenantSummary,
} from '../../helpers/organizationTenants'

type Props = {
  summary?: OrganizationTenantSummary
  emptyMessage?: string
  compact?: boolean
}

const LinkedTenantsPreview = ({
  summary = emptyOrganizationTenantSummary,
  emptyMessage = 'No linked tenants',
  compact = false,
}: Props) => {
  const tenants = Array.isArray(summary?.rows) ? summary.rows : []

  if (!summary?.count) {
    return <div className='text-sm text-gray-500 dark:text-dark-600'>{emptyMessage}</div>
  }

  const preview = compact ? tenants.slice(0, 2) : tenants.slice(0, 3)
  const remainingCount = Math.max(summary.count - preview.length, 0)

  return (
    <div className='flex min-w-0 flex-wrap items-center gap-1.5'>
      <span className='rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700 dark:bg-blue-950/40 dark:text-blue-100'>
        {summary.count} linked
      </span>
      {preview.map((tenant: any) => (
        <span
          key={tenant.id || tenant.name}
          className='max-w-full truncate rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-dark-700 dark:text-gray-100'
          title={tenant.name}
        >
          {tenant.name || 'Unnamed tenant'}
        </span>
      ))}
      {remainingCount > 0 ? (
        <span className='rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-dark-700 dark:text-gray-100'>
          +{remainingCount} more
        </span>
      ) : null}
    </div>
  )
}

export default LinkedTenantsPreview
