import React from 'react'

export default function NovaCardGradientPicker({ gradients = [], selectedKey = null, onSelect }) {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      {gradients.map((gradient) => {
        const active = selectedKey === gradient.key
        return (
          <button
            key={gradient.key}
            type="button"
            onClick={() => onSelect?.(gradient)}
            className={`overflow-hidden rounded-[22px] border text-left transition ${active ? 'border-sky-300/35 bg-sky-400/10' : 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]'}`}
          >
            <div className="h-20 w-full" style={{ background: `linear-gradient(135deg, ${gradient.colors?.[0] || '#0f172a'}, ${gradient.colors?.[1] || '#1d4ed8'})` }} />
            <div className="p-3">
              <div className="text-sm font-semibold text-white">{gradient.label}</div>
              <div className="mt-1 text-[11px] uppercase tracking-[0.18em] text-slate-400">{gradient.key}</div>
            </div>
          </button>
        )
      })}
    </div>
  )
}