import React from 'react';

const SNAPSHOTS = [
  { key: 'krow', label: 'KROW Score', get: (p) => Math.round(p.krow_score || 0) },
  { key: 'badges', label: 'Other Badges', get: (p) => (p.earned_badges || []).length },
  { key: 'skills', label: 'Skills', get: (p) => (p.skills || []).length },
  { key: 'shares', label: 'Shares', get: () => 0 },
];

export default function ActivitySnapshot({ profile }) {
  return (
    <div className="rounded-2xl bg-[#E8EEFE] p-6 border border-[#C7D4F7]">
      <h3 className="font-serif text-center text-[18px] font-semibold mb-5" style={{ color: '#333F48' }}>
        Activity snapshot
      </h3>
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
        {SNAPSHOTS.map((s) => (
          <div key={s.key} className="bg-white rounded-2xl shadow-sm p-4 flex flex-col items-center justify-center aspect-square">
            <span className="text-[34px] font-bold leading-none" style={{ color: '#0838E0' }}>
              {s.get(profile)}
            </span>
            <span className="text-[12px] text-[#333F48] mt-2 text-center">{s.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}