import React from 'react'

/**
 * ReadinessChecklist
 *
 * Shows upload readiness requirements with status icons.
 * Each item can have an optional `href` to jump to the section for a quick fix.
 */
export default function ReadinessChecklist({ items = [] }) {
  const allOk = items.every((item) => item.ok)

  return (
    <div>
      <p className="mb-2 text-[10px] uppercase tracking-wider text-white/40">
        Readiness
      </p>
      <ul className="space-y-1" role="list">
        {items.map((item) => (
          <li key={item.label} className="flex items-center gap-2 text-xs">
            <span
              className={[
                'flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[9px] font-bold',
                item.ok
                  ? 'bg-emerald-500/25 text-emerald-300'
                  : 'bg-white/8 text-white/30',
              ].join(' ')}
              aria-hidden="true"
            >
              {item.ok ? '✓' : '○'}
            </span>
            <span className={item.ok ? 'text-white/70' : 'text-white/40'}>
              {(item.onClick || item.href) && !item.ok ? (
                <button
                  type="button"
                  onClick={item.onClick}
                  className="text-sky-400 hover:underline focus-visible:outline-none focus-visible:underline"
                >
                  {item.label}
                </button>
              ) : (
                item.label
              )}
            </span>
            {item.optional && !item.ok && (
              <span className="ml-auto text-[9px] text-white/25 italic">optional</span>
            )}
          </li>
        ))}
      </ul>
      {allOk && (
        <p className="mt-2 text-[11px] text-emerald-300/80">All requirements met.</p>
      )}
    </div>
  )
}