'use client'

import type { ReactNode } from 'react'

export type AdminMetricItem = {
  label: string
  value: ReactNode
}

export function AdminTopMetrics({ items, className = '' }: { items: AdminMetricItem[]; className?: string }) {
  if (!items.length) return null

  return (
    <div className={`flex min-w-0 flex-wrap items-center justify-end gap-1 ${className}`}>
      {items.map((item) => (
        <div key={item.label} className="inline-flex h-7 min-w-[96px] max-w-[140px] items-center justify-between gap-1.5 border border-line bg-white px-2">
          <span className="truncate text-[11px] font-extrabold text-soft">{item.label}</span>
          <span className="truncate text-xs font-extrabold text-ink">{item.value}</span>
        </div>
      ))}
    </div>
  )
}

export function AdminMetricPanel({ items, className = '' }: { items: AdminMetricItem[]; className?: string }) {
  if (!items.length) return null
  const gridClass = items.length >= 6
    ? 'md:grid-cols-3 xl:grid-cols-6'
    : items.length === 5
      ? 'md:grid-cols-5'
      : items.length === 4
        ? 'md:grid-cols-4'
        : items.length === 3
          ? 'md:grid-cols-3'
          : 'md:grid-cols-2'

  return (
    <section className={`shrink-0 border border-line bg-white px-2 py-1.5 ${className}`}>
      <div className={`grid divide-y divide-line md:divide-x md:divide-y-0 ${gridClass}`}>
        {items.map((item) => (
          <div key={item.label} className="flex min-h-9 min-w-0 items-center justify-between gap-2 px-2.5 py-0.5">
            <span className="truncate text-[11px] font-extrabold text-soft">{item.label}</span>
            <span className="truncate text-base font-extrabold text-ink">{item.value}</span>
          </div>
        ))}
      </div>
    </section>
  )
}
