"use client"

import { useState, useEffect } from "react"
import { AuthGate } from "@/components/auth-gate"
import { VideoCard } from "@/components/video-card"

interface Video {
  id: string
  title: string
  description: string
  youtubeUrl: string
  thumbnail: string
}

export function VideosContent() {
  const [videos, setVideos] = useState<Video[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch("/api/videos")
      .then((r) => r.json())
      .then((data) => setVideos(data))
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  return (
    <AuthGate>
      <div className="min-h-screen py-12 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h1 className="text-3xl lg:text-4xl font-bold mb-4">
              Video Tutorials
            </h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Learn how to get the most out of your Android box with our
              step-by-step video guides
            </p>
          </div>
          {loading ? (
            <div className="text-center text-muted-foreground animate-pulse">
              Loading videos...
            </div>
          ) : videos.length === 0 ? (
            <div className="text-center text-muted-foreground">
              No videos available yet. Check back soon!
            </div>
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {videos.map((video) => (
                <VideoCard key={video.id} {...video} />
              ))}
            </div>
          )}
        </div>
      </div>
    </AuthGate>
  )
}