"use client";

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

export default function AvatarStack() {
  return (
    <div className="flex flex-wrap items-center gap-3 sm:gap-4">
      <div className="flex -space-x-2.5 shrink-0">
        {RECENT_JOINERS.slice(0, 6).map((u, i) => (
          <div
            key={i}
            className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-[#faf8f5] dark:border-stone-950 shadow-sm ring-1 ring-stone-200/50 dark:ring-stone-700/50"
            title={u.name}
          >
            <Image
              src={u.avatar}
              alt={u.name}
              fill
              sizes="40px"
              className="object-cover"
              unoptimized
            />
          </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.map((u) => u.name).join(" ")}
        </span>
        <span className="ml-1">等本月新加入</span>
      </div>
    </div>
  );
}