import React from 'react';
import { Star } from 'lucide-react';

const SEED_NETWORK = ['Luis', 'Chef Antonio'];
const SEED_ROLES = ['Supervisor', 'Chef'];

export default function ExperienceNetwork({ profile }) {
  const exp = (profile.experience || []).slice(0, 3);
  const list = exp.length
    ? exp.map((e, i) => ({
        company: e.company || 'Company',
        shifts: Math.max(1, Math.round((e.years || 1) * 20)),
        ref: SEED_NETWORK[i % SEED_NETWORK.length],
        role: e.role || SEED_ROLES[i % SEED_ROLES.length],
        action: i === 0 ? 'Request Reference' : 'Endorse Skill',
      }))
    : [
        { company: 'Google', shifts: 58, ref: 'Luis', role: 'Supervisor', action: 'Request Reference' },
        { company: 'Adobe', shifts: 26, ref: 'Chef Antonio', role: 'Chef', action: 'Endorse Skill' },
        { company: 'EA', shifts: 15, ref: 'Maria', role: 'Manager', action: 'Request Reference' },
      ];

  return (
    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
      <h2 className="text-[15px] font-semibold text-[#0F172A]">Verified Experience & Network</h2>
      <div className="mt-4 space-y-2">
        {list.map((x, i) => (
          <div key={i} className="flex items-center justify-between rounded-xl border border-[#E5E7EB] p-3">
            <div className="min-w-0">
              <p className="text-[14px] font-semibold text-[#0F172A] truncate">{x.company}</p>
              <p className="text-[12px] text-[#16A34A] font-medium">{x.shifts} shifts · {x.ref} ({x.role})</p>
            </div>
            <div className="flex items-center gap-3 shrink-0">
              <div className="flex">
                {Array.from({ length: 5 }).map((_, s) => (
                  <Star key={s} className="w-3.5 h-3.5 text-[#F59E0B] fill-[#F59E0B]" />
                ))}
              </div>
              <button className="text-[12px] font-semibold text-[#0838E0] border border-[#0838E0] rounded-full px-3 py-1.5 hover:bg-[#EEF3FE] transition-colors whitespace-nowrap">
                {x.action}
              </button>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}