"use client";

import { RECENT_JOINERS } from "@/config/home.config";

function getInitial(name: string): string {
  if (!name || name.length === 0) return "?";
  return name.slice(0, 1);
}

export default function AvatarStack() {
  return (
    <div className="flex flex-wrap items-center gap-3 sm:gap-4">
      <div className="flex -space-x-2 shrink-0">
        {RECENT_JOINERS.slice(0, 6).map((u, i) => (
          <div
            key={i}
            className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-[#faf8f5] dark:border-stone-950 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 flex items-center justify-center text-xs font-medium ring-1 ring-stone-200/50 dark:ring-stone-700/50"
            title={u.name}
          >
            {getInitial(u.name)}
          </div>
        ))}
      </div>
      <div className="text-sm text-stone-600 dark:text-stone-400 min-w-0">
        <span className="font-medium text-stone-800 dark:text-stone-200">
          {RECENT_JOINERS.slice(0, 3).map((u) => u.name).join("、")}
        </span>
        <span className="ml-1">等有报名意向</span>
      </div>
    </div>
  );
}