"use client";

/**
 * NewUsersStrip — the "new on the platform" discovery row shown at the very
 * end of the home feed. Up to 5 accounts that joined in the last 24h; each
 * avatar links to the user's profile. Renders nothing when the list is empty
 * (the feed simply ends).
 */

import Link from "next/link";
import { Sparkles } from "lucide-react";
import type { UserSummary } from "@/lib/social";
import { UserAvatar } from "@/components/ui/user-avatar";

export function NewUsersStrip({ users }: { users: UserSummary[] }) {
  if (users.length === 0) return null;
  return (
    <section className="mt-2 rounded-xl bg-card ring-1 ring-foreground/10 p-5">
      <div className="mb-4 flex items-center gap-2.5">
        <span
          aria-hidden
          className="inline-flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary shrink-0"
        >
          <Sparkles className="size-4" />
        </span>
        <div className="min-w-0">
          <h2 className="text-sm font-semibold text-foreground">
            New to Prabhupāda Says
          </h2>
          <p className="text-xs text-muted-foreground">
            Welcome them — follow the devotees who just joined.
          </p>
        </div>
      </div>
      <ul className="flex flex-wrap gap-4">
        {users.map((u) => (
          <li key={u.handle}>
            <Link
              href={`/u/${u.handle}`}
              className="group flex w-20 flex-col items-center gap-1.5 text-center"
            >
              <UserAvatar
                src={u.avatar_url}
                name={u.name}
                className="size-14 group-hover:ring-foreground/30 transition"
              />
              <span className="block w-full truncate text-xs font-medium text-foreground">
                {u.name}
              </span>
              <span className="-mt-1 block w-full truncate text-[11px] text-muted-foreground">
                @{u.handle}
              </span>
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}