import { useLang } from '../i18n/LanguageContext'
import type { ArkaModule } from '../lib/api'
import type { TranslationKey } from '../i18n/translations'
import { StatusBadge } from './StatusBadge'
import { ModuleIcon } from './ModuleIcon'

export function ModuleCard({ module }: { module: ArkaModule }) {
  const { t, pick } = useLang()
  const layerKey = `layer.${module.layer}` as TranslationKey

  return (
    <article className="group flex min-h-56 flex-col rounded-2xl border border-arka-border bg-arka-surface p-5 transition-all hover:-translate-y-0.5 hover:border-arka-accent/35">
      <div className="mb-5 flex items-start justify-between">
        <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-arka-border bg-arka-surface-2 text-arka-accent transition-colors group-hover:border-arka-accent/25">
          <ModuleIcon name={module.icon} size={22} stroke={1.6} />
        </div>
        <StatusBadge status={module.status} />
      </div>
      <h3 className="text-base font-semibold text-white">{pick(module.name)}</h3>
      <p className="mt-2 flex-1 text-sm leading-6 text-arka-muted">
        {pick(module.description)}
      </p>
      <div className="mt-4 flex items-center gap-2 border-t border-arka-border pt-4 text-[10px] font-medium uppercase tracking-[0.1em] text-arka-muted">
        <span className="rounded-md bg-arka-surface-2 px-2 py-1">{t(layerKey)}</span>
        <span className="text-arka-accent/80">TCP · {pick(module.tcpStep)}</span>
      </div>
    </article>
  )
}
