import React from 'react'

export default function FollowersPreview({ users = [], label = '', href = null }) {
  if (!Array.isArray(users) || users.length === 0) return null

  const preview = users.slice(0, 4)

  return (
    <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
      <div className="flex items-center gap-3">
        <div className="flex -space-x-2">
          {preview.map((user) => (
            <a
              key={user.id}
              href={user.profile_url || `/@${user.username}`}
              className="inline-flex h-9 w-9 overflow-hidden rounded-full border border-[#09111f] bg-[#09111f] ring-1 ring-white/10"
              title={user.name || user.username}
            >
              <img
                src={user.avatar_url || '/images/avatar_default.webp'}
                alt={user.username || user.name}
                className="h-full w-full object-cover"
                loading="lazy"
              />
            </a>
          ))}
        </div>

        <div className="min-w-0 flex-1">
          <p className="text-sm font-medium text-white/90">{label}</p>
          {href ? (
            <a href={href} className="text-xs text-sky-300/80 transition-colors hover:text-sky-200">
              View network
            </a>
          ) : null}
        </div>
      </div>
    </div>
  )
}