import type { ReactNode } from 'react'

/** Compact labeled tile — same idiom as `AdminUserContactInfo`. */
export const DetailItem = ({ label, children }: { label: string; children: ReactNode }) => (
  <div className="flex flex-col gap-1 rounded-xl border border-secondary-40 bg-secondary-50/60 p-3 text-right">
    <span className="text-sm text-secondary-30">{label}</span>
    <span className="text-sm font-semibold text-secondary-20">{children}</span>
  </div>
)

export const InsightStat = ({ label, value, hint }: { label: string; value: string; hint?: string }) => (
  <div className="rounded-xl bg-secondary-50/70 p-3">
    <span className="block text-xs text-text-muted">{label}</span>
    <strong className="mt-1 block text-base font-bold text-secondary-10">{value}</strong>
    {hint ? <span className="mt-1 block text-sm text-text-muted">{hint}</span> : null}
  </div>
)