Stat band

import clsx from 'clsx'
import type React from 'react'
import { Sparkbars } from './sparkbars'

const columns = {
  2: 'sm:grid-cols-2 sm:*:even:border-l sm:*:even:pl-6',
  3: 'sm:grid-cols-2 sm:max-lg:*:even:border-l sm:max-lg:*:even:pl-6 lg:grid-cols-3 lg:*:not-first:border-l lg:*:not-first:pl-6',
  4: 'sm:grid-cols-2 sm:max-lg:*:even:border-l sm:max-lg:*:even:pl-6 lg:grid-cols-4 lg:*:not-first:border-l lg:*:not-first:pl-6',
}

const tones = {
  neutral: 'text-zinc-500 dark:text-zinc-400',
  good: 'text-emerald-600 dark:text-emerald-400',
  bad: 'text-red-600 dark:text-red-400',
}

export type Trend = { text: string; tone: keyof typeof tones }

export function trend(
  current: number,
  previous: number,
  { upIsBad = false, period = 'last month' }: { upIsBad?: boolean; period?: string } = {}
): Trend {
  let change = current - previous
  if (change === 0) return { text: `Same as ${period}`, tone: 'neutral' }
  let tone: Trend['tone'] = change < 0 === upIsBad ? 'good' : 'bad'
  if (previous === 0) return { text: `${change > 0 ? 'Up' : 'Down'} from zero on ${period}`, tone }
  let share = Math.round(Math.abs(change / previous) * 100)
  return { text: `${share}% ${change > 0 ? 'up' : 'down'} on ${period}`, tone }
}

export function StatBand({
  columns: count = 4,
  className,
  ...props
}: { columns?: keyof typeof columns } & React.ComponentPropsWithoutRef<'dl'>) {
  return <dl {...props} className={clsx(className, 'grid grid-cols-1 gap-x-6 gap-y-8', columns[count])} />
}

export function StatTile({
  label,
  value,
  series,
  color,
  delta,
  context,
  className,
  children,
  ...props
}: {
  label: React.ReactNode
  value: React.ReactNode
  series?: number[]
  color?: string
  delta?: Trend
  context?: React.ReactNode
} & React.ComponentPropsWithoutRef<'div'>) {
  return (
    <div {...props} className={clsx(className, 'min-w-0 border-zinc-950/10 dark:border-white/10')}>
      <dt className="truncate text-base/6 sm:text-sm/6 text-zinc-500 dark:text-zinc-400">{label}</dt>
      <dd className="mt-1 text-3xl/9 font-semibold text-zinc-950 tabular-nums sm:text-2xl/8 dark:text-white">{value}</dd>
      {series && (
        <dd>
          <Sparkbars series={series} color={color} className="mt-3" />
        </dd>
      )}
      {delta && (
        <dd className={clsx('mt-2 text-base/6 font-medium sm:text-sm/6', tones[delta.tone])}>
          {delta.text}
          {delta.tone !== 'neutral' && <span className="sr-only">{delta.tone === 'good' ? ' (good)' : ' (bad)'}</span>}
        </dd>
      )}
      {context && (
        <dd className="mt-0.5 text-base/6 text-pretty text-zinc-500 sm:text-sm/6 dark:text-zinc-400">{context}</dd>
      )}
      {children}
    </div>
  )
}

<script setup lang="ts">
const columns = {
  2: 'sm:grid-cols-2 sm:*:even:border-l sm:*:even:pl-6',
  3: 'sm:grid-cols-2 sm:max-lg:*:even:border-l sm:max-lg:*:even:pl-6 lg:grid-cols-3 lg:*:not-first:border-l lg:*:not-first:pl-6',
  4: 'sm:grid-cols-2 sm:max-lg:*:even:border-l sm:max-lg:*:even:pl-6 lg:grid-cols-4 lg:*:not-first:border-l lg:*:not-first:pl-6',
}

withDefaults(defineProps<{ columns?: keyof typeof columns }>(), { columns: 4 })
</script>

<template>
  <dl class="grid grid-cols-1 gap-x-6 gap-y-8" :class="columns[$props.columns]">
    <slot />
  </dl>
</template>