import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { fetchCategories } from '../api/endpoints'

const gradients = [
  'from-indigo-500 to-purple-600',
  'from-rose-500 to-orange-500',
  'from-emerald-500 to-teal-600',
  'from-sky-500 to-blue-600',
  'from-fuchsia-500 to-pink-600',
  'from-amber-500 to-red-500',
  'from-cyan-500 to-indigo-600',
  'from-lime-500 to-green-600',
]

export default function Categories() {
  const [categories, setCategories] = useState(null)

  useEffect(() => {
    fetchCategories().then(setCategories).catch(() => setCategories([]))
  }, [])

  return (
    <div>
      <h1 className="mb-4 text-lg font-bold">Categories</h1>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
        {(categories || Array.from({ length: 8 })).map((c, i) =>
          c ? (
            <Link
              key={c.id}
              to={`/?category=${c.slug}`}
              className={`flex aspect-video flex-col justify-end rounded-xl bg-gradient-to-br ${
                gradients[i % gradients.length]
              } p-4 text-white shadow-sm transition hover:scale-[1.02]`}
            >
              <span className="text-lg font-bold">{c.name}</span>
              <span className="text-xs opacity-80">{c.videos_count ?? 0} videos</span>
            </Link>
          ) : (
            <div key={i} className="aspect-video shimmer relative overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800" />
          )
        )}
      </div>
    </div>
  )
}
