import type { LucideProps } from 'lucide-solid'
import type { Component } from 'solid-js'
import { cn } from '@/utils/cn'

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

const toneClasses: Record<Tone, { chip: string; line: string; shadow: string }> = {
  neutral: {
    chip: 'bg-surface-high text-fg border-3 border-outline',
    line: 'bg-outline',
    shadow: 'shadow-brutal-outline',
  },
  accent: {
    chip: 'bg-primary text-on-primary border-3 border-primary',
    line: 'bg-primary',
    shadow: 'shadow-brutal',
  },
  secondary: {
    chip: 'bg-fg text-surface border-3 border-fg',
    line: 'bg-fg',
    shadow: 'shadow-brutal-outline',
  },
}

interface MetricCardProps {
  icon: Component<LucideProps>
  label: string
  value: string
  detail: string
  tone?: Tone
  class?: string
}

export const MetricCard = (props: MetricCardProps) => {
  const Icon = props.icon
  const tone = () => toneClasses[props.tone ?? 'neutral']

  return (
    <div class={cn(
      'group bg-surface-container p-6 transition-all duration-100 hover:translate-x-[-4px] hover:translate-y-[-4px] border-4 border-outline',
      tone().shadow,
      props.class
    )}>
      <div class={cn('h-1 w-16', tone().line)} />
      <div class="mt-6 flex items-start justify-between gap-4">
        <div class="min-w-0 flex-1">
          <p class="text-[9px] font-bold uppercase tracking-[0.2em] text-muted-fg font-mono">// {props.label}</p>
          <p class="mt-4 text-5xl font-bold text-fg tracking-tighter uppercase">{props.value}</p>
          <p class="mt-3 text-xs text-muted-fg uppercase tracking-wide font-mono">{props.detail}</p>
        </div>

        <div class={cn('p-3 transition-transform duration-100 group-hover:scale-110', tone().chip)}>
          <Icon class="h-6 w-6" />
        </div>
      </div>
    </div>
  )
}
