import React from 'react'

const AVATAR_FALLBACK = 'https://files.skinbase.org/avatars/default.webp'

function CreatorCard({ creator }) {
  return (
    <article className="group flex flex-col items-center rounded-2xl bg-nova-800/60 p-5 ring-1 ring-white/5 hover:ring-white/10 hover:bg-nova-800 transition">
      <a href={creator.url} className="block">
        <img
          src={creator.avatar || AVATAR_FALLBACK}
          alt={creator.name}
          className="mx-auto h-14 w-14 rounded-full object-cover ring-2 ring-white/10 group-hover:ring-accent/50 transition"
          loading="lazy"
          onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
        />
      </a>

      <div className="mt-3 w-full text-center">
        <a href={creator.url} className="block truncate text-sm font-semibold text-white hover:text-accent transition">
          {creator.name}
        </a>
        {creator.username && (
          <p className="truncate text-xs text-nova-400">@{creator.username}</p>
        )}
        <div className="mt-2 flex items-center justify-center gap-3 text-xs text-nova-500">
          {creator.followers_count > 0 && (
            <span title="Followers">{creator.followers_count.toLocaleString()} followers</span>
          )}
          {creator.artworks_count > 0 && (
            <span title="Artworks">{creator.artworks_count.toLocaleString()} artworks</span>
          )}
        </div>
      </div>

      <a
        href={creator.url}
        className="mt-4 w-full rounded-lg bg-nova-700 py-1.5 text-center text-xs font-medium text-white hover:bg-nova-600 transition"
      >
        View Profile
      </a>
    </article>
  )
}

export default function HomeSuggestedCreators({ creators }) {
  if (!Array.isArray(creators) || creators.length === 0) return null

  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <div className="mb-5 flex items-center justify-between">
        <div>
          <h2 className="text-xl font-bold text-white">💡 Suggested Creators</h2>
          <p className="mt-0.5 text-xs text-nova-400">Creators you might enjoy following</p>
        </div>
        <a href="/creators/top" className="text-sm text-nova-300 hover:text-white transition">
          Explore all →
        </a>
      </div>

      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
        {creators.map((creator) => (
          <CreatorCard key={creator.id} creator={creator} />
        ))}
      </div>
    </section>
  )
}