import { Show, splitProps, type JSX } from 'solid-js'
import { cn } from '@/utils/cn'

type Tone = 'neutral' | 'accent' | 'secondary'

const toneDotClasses: Record<Tone, string> = {
  neutral: 'bg-muted-fg',
  accent: 'bg-primary',
  secondary: 'bg-secondary',
}

const toneBgClasses: Record<Tone, string> = {
  neutral: 'bg-surface-container hover:bg-surface-high',
  accent: 'bg-primary/5 hover:bg-primary/10',
  secondary: 'bg-secondary/5 hover:bg-secondary/10',
}

interface DataRowProps extends JSX.HTMLAttributes<HTMLDivElement> {
  tone?: Tone
  eyebrow?: string
  title: string
  description?: string
  meta?: string
  badges?: JSX.Element
  trailing?: JSX.Element
}

export const DataRow = (props: DataRowProps) => {
  const [local, rest] = splitProps(props, [
    'class',
    'tone',
    'eyebrow',
    'title',
    'description',
    'meta',
    'badges',
    'trailing',
  ])

  return (
    <div
      class={cn('rounded-xl px-4 py-3.5 transition-all duration-200', toneBgClasses[local.tone ?? 'neutral'], local.class)}
      {...rest}
    >
      <div class="flex items-start justify-between gap-4">
        <div class="min-w-0 flex-1">
          <div class="flex flex-wrap items-center gap-2.5">
            <Show when={local.eyebrow}>
              <div class="flex items-center gap-2">
                <span class={cn('h-1.5 w-1.5 rounded-full', toneDotClasses[local.tone ?? 'neutral'])} />
                <span class="text-[10px] font-semibold uppercase tracking-widest text-muted-fg">
                  {local.eyebrow}
                </span>
              </div>
            </Show>
            <h3 class="text-sm font-medium text-fg">{local.title}</h3>
            <Show when={local.badges}>{local.badges}</Show>
          </div>

          <Show when={local.description}>
            <p class="mt-1.5 text-xs text-muted-fg leading-relaxed">{local.description}</p>
          </Show>

          <Show when={local.meta}>
            <p class="mt-2 text-[10px] font-medium uppercase tracking-widest text-muted-fg">{local.meta}</p>
          </Show>
        </div>

        <Show when={local.trailing}>
          <div class="shrink-0">{local.trailing}</div>
        </Show>
      </div>
    </div>
  )
}
