import React from 'react';
import { ShieldCheck, Plus } from 'lucide-react';

// The transcript replacement — verified capabilities as visual chips,
// each backed by evidence. Empty until the worker proves something.
export default function CapabilityTimeline({ profile, compact }) {
  const caps = (profile?.capabilities || []).filter((c) => c.status === 'verified' || c.status === 'pending');
  return (
    <section className={compact ? 'py-2' : 'py-8'}>
      <div className="flex items-center justify-between mb-3">
        <h2 className="text-[15px] font-semibold text-[#0F172A]">Proven skills</h2>
        <span className="text-[11px] text-[#94A3B8]">{caps.length} verified</span>
      </div>
      {!caps.length ? (
        <div className="rounded-2xl border border-dashed border-[#E2E8F0] bg-[#F8FAFC] p-6 text-center">
          <div className="w-10 h-10 rounded-full bg-white border border-[#E2E8F0] flex items-center justify-center mx-auto mb-2">
            <Plus className="w-4 h-4 text-[#94A3B8]" />
          </div>
          <p className="text-[12px] text-[#64748B]">No verified skills yet — prove a challenge to start your chain.</p>
        </div>
      ) : (
        <div className="flex flex-wrap gap-2">
          {caps.map((c, i) => (
            <span key={i} className="inline-flex items-center gap-1.5 rounded-full bg-[#F0FDF4] border border-[#BBF7D0] px-3 py-1.5">
              <ShieldCheck className="w-3.5 h-3.5 text-[#16A34A]" />
              <span className="text-[12px] font-medium text-[#166534]">{c.skill}</span>
              {c.verified_date && (
                <span className="text-[10px] text-[#16A34A]/70">
                  {new Date(c.verified_date).toLocaleDateString('en-US', { month: 'short' })}
                </span>
              )}
            </span>
          ))}
        </div>
      )}
    </section>
  );
}