import React from 'react'

export default function NovaCardTemplatePicker({ templates = [], selectedId = null, onSelect }) {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      {templates.map((template) => {
        const active = Number(selectedId) === Number(template.id)

        return (
          <button
            key={template.id}
            type="button"
            onClick={() => onSelect?.(template)}
            className={`rounded-[24px] border p-4 text-left transition ${active ? 'border-sky-300/35 bg-sky-400/10 text-white' : 'border-white/10 bg-white/[0.03] text-slate-200 hover:border-white/20 hover:bg-white/[0.05]'}`}
          >
            <div className="text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">Template</div>
            <div className="mt-2 text-base font-semibold tracking-[-0.03em]">{template.name}</div>
            {template.description ? <div className="mt-2 text-sm text-slate-400">{template.description}</div> : null}
            <div className="mt-3 flex flex-wrap gap-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">
              {(template.supported_formats || []).map((format) => (
                <span key={`${template.id}-${format}`} className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">
                  {format}
                </span>
              ))}
            </div>
          </button>
        )
      })}
    </div>
  )
}