import React from 'react'

export default function NovaCardFontPicker({ fonts = [], selectedKey = null, onSelect }) {
  return (
    <div className="grid gap-3">
      {fonts.map((font) => {
        const active = selectedKey === font.key
        return (
          <button
            key={font.key}
            type="button"
            onClick={() => onSelect?.(font)}
            className={`rounded-[22px] border p-4 text-left transition ${active ? 'border-sky-300/35 bg-sky-400/12 ring-1 ring-sky-400/20 text-white' : 'border-white/10 bg-white/[0.03] text-slate-200 hover:border-white/20 hover:bg-white/[0.05]'}`}
          >
            <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 mb-2">{font.label}</div>
            <div className="text-[1.65rem] font-semibold leading-tight text-white" style={{ fontFamily: font.family, fontWeight: font.weight || 600 }}>
              The quick brown fox
            </div>
            <div className="mt-2 text-xs text-slate-400 leading-relaxed" style={{ fontFamily: font.family }}>
              {font.recommended_use}
            </div>
            {active && (
              <div className="mt-2 inline-flex items-center gap-1 rounded-full border border-sky-400/25 bg-sky-500/10 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-sky-300">
                Active
              </div>
            )}
          </button>
        )
      })}
    </div>
  )
}