Profile Card

export function ProfileCard({ avatar, name, role, stats }) {
  return (
    <div className="flex flex-col items-center rounded-2xl border border-slate-200 p-6 text-center">
      <img src={avatar} alt={name} className="h-16 w-16 rounded-full object-cover" />
      <h3 className="mt-3 font-semibold text-slate-900">{name}</h3>
      <p className="text-sm text-slate-500">{role}</p>
      <div className="mt-4 flex gap-6 text-sm">
        {stats.map((s) => (
          <div key={s.label}>
            <p className="font-semibold text-slate-900">{s.value}</p>
            <p className="text-slate-500">{s.label}</p>
          </div>
        ))}
      </div>
    </div>
  );
}