"use client"

import { AuthGate } from "@/components/auth-gate"
import { VideoCard } from "@/components/video-card"
import { videos } from "@/lib/data"

export function VideosContent() {
  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>
          <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>
  )
}