import React from 'react';
import { Briefcase, Sparkles, Star, Quote } from 'lucide-react';
import { esatTag, recentJobs, clientEndorsements } from '@/lib/talentInsights';

export default function EmployerInsights({ profile }) {
  const esat = esatTag(profile);
  const jobs = recentJobs(profile);
  const endorsements = clientEndorsements(profile);

  if (jobs.length === 0 && endorsements.length === 0) return null;

  return (
    <div className="mt-3 pt-3 border-t border-[#F3F4F6] space-y-3">
      {/* ESAT + Job history header row */}
      <div className="flex items-center justify-between gap-2">
        <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider flex items-center gap-1.5">
          <Briefcase className="w-3 h-3" /> JOB HISTORY · 3 YR
        </p>
        <span className="inline-flex items-center gap-1 text-[10px] font-bold text-[#9CA3AF] tracking-wider">
          <Sparkles className="w-3 h-3" /> ESAT
          <span className={`ml-1 px-2 py-0.5 rounded-full text-[10px] font-semibold ${esat.cls}`}>{esat.label}</span>
        </span>
      </div>

      {jobs.length > 0 && (
        <div className="space-y-1">
          {jobs.map((e, i) => (
            <div key={i} className="flex items-center gap-2 text-[11px]">
              <Briefcase className="w-3 h-3 text-[#9CA3AF] shrink-0" />
              <span className="font-medium text-[#111827] truncate">{e.role}</span>
              <span className="text-[#6B7280] truncate">· {e.company}</span>
              {e.years != null && <span className="text-[#9CA3AF] shrink-0">· {e.years}yr</span>}
            </div>
          ))}
        </div>
      )}

      {/* 3 Client endorsements */}
      {endorsements.length > 0 && (
        <div>
          <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2 flex items-center gap-1.5">
            <Quote className="w-3 h-3" /> CLIENT ENDORSEMENTS
          </p>
          <div className="space-y-1.5">
            {endorsements.map((en, i) => (
              <div key={i} className="flex items-center gap-2 bg-[#F9FAFB] rounded-lg px-2.5 py-1.5">
                <div className="flex-1 min-w-0">
                  <p className="text-[11px] font-semibold text-[#111827] truncate">{en.company}</p>
                  <p className="text-[10px] text-[#6B7280] truncate">{en.role}</p>
                </div>
                <div className="flex items-center gap-0.5 shrink-0">
                  {Array.from({ length: 5 }).map((_, s) => (
                    <Star
                      key={s}
                      className={`w-3 h-3 ${s < en.stars ? 'text-[#F59E0B] fill-[#F59E0B]' : 'text-[#E5E7EB]'}`}
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}