import React from 'react'
import LevelBadge from '../../xp/LevelBadge'

export default function TabStories({ stories, username }) {
  const list = Array.isArray(stories) ? stories : []

  if (!list.length) {
    return (
      <div className="rounded-xl border border-white/10 bg-white/[0.02] px-6 py-12 text-center text-slate-300">
        No stories published yet.
      </div>
    )
  }

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
        {list.map((story) => (
          <a
            key={story.id}
            href={`/stories/${story.slug}`}
            className="group overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg transition duration-200 hover:scale-[1.01] hover:border-sky-500/40"
          >
            {story.cover_url ? (
              <img src={story.cover_url} alt={story.title} className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-105" />
            ) : (
              <div className="h-44 w-full bg-gradient-to-br from-gray-900 via-slate-900 to-sky-950" />
            )}
            <div className="space-y-2 p-4">
              <div className="flex items-center justify-between gap-2">
                <LevelBadge level={story.creator_level} rank={story.creator_rank} compact />
                <span className="text-[11px] uppercase tracking-[0.16em] text-gray-500">Story</span>
              </div>
              <h3 className="line-clamp-2 text-base font-semibold text-white">{story.title}</h3>
              <p className="line-clamp-2 text-xs text-gray-300">{story.excerpt || ''}</p>
              <div className="flex items-center gap-3 text-xs text-gray-400">
                <span>{story.reading_time || 1} min read</span>
                <span>{story.views || 0} views</span>
                <span>{story.likes_count || 0} likes</span>
              </div>
            </div>
          </a>
        ))}
      </div>

      <a
        href={`/stories/creator/${username}`}
        className="inline-flex rounded-lg border border-sky-400/30 bg-sky-500/10 px-3 py-2 text-sm text-sky-300 transition hover:scale-[1.01] hover:text-sky-200"
      >
        View all stories
      </a>
    </div>
  )
}