import { Eye, Heart, MessageCircle } from "lucide-react";
import Image from "next/image";

interface VideoItem {
  id: number;
  title: string;
  thumbnail: string;
  duration: string;
  publishedAt: string;
  views: string;
  likes: string;
  comments: string;
}

const sampleVideos: VideoItem[] = [
  {
    id: 1,
    title: "Cuplikan Kegiatan Presiden di IKN",
    thumbnail: "/yt/thumb1.jpg",
    duration: "12:30",
    publishedAt: "2 jam yang lalu",
    views: "12K",
    likes: "230",
    comments: "45",
  },
  {
    id: 2,
    title: "Pembangunan MRT Fase Berikutnya Resmi Dimulai",
    thumbnail: "/yt/thumb2.jpg",
    duration: "08:12",
    publishedAt: "5 jam yang lalu",
    views: "9.4K",
    likes: "180",
    comments: "30",
  },
  {
    id: 3,
    title: "Wilayah Indonesia Siap Hadapi Cuaca Ekstrem",
    thumbnail: "/yt/thumb3.jpg",
    duration: "05:50",
    publishedAt: "1 hari lalu",
    views: "21K",
    likes: "540",
    comments: "121",
  },
  {
    id: 4,
    title: "Peningkatan Ekonomi Regional Terus Dijaga",
    thumbnail: "/yt/thumb4.jpg",
    duration: "10:44",
    publishedAt: "2 hari lalu",
    views: "18K",
    likes: "420",
    comments: "88",
  },
  {
    id: 5,
    title: "Laporan Khusus Perkembangan Industri Kreatif",
    thumbnail: "/yt/thumb5.jpg",
    duration: "14:02",
    publishedAt: "3 hari lalu",
    views: "30K",
    likes: "830",
    comments: "200",
  },
  {
    id: 6,
    title: "Paparan Menteri Perhubungan Soal Transportasi",
    thumbnail: "/yt/thumb6.jpg",
    duration: "07:21",
    publishedAt: "4 hari lalu",
    views: "9K",
    likes: "114",
    comments: "26",
  },
];

export default function YouTubeSection() {
  return (
    <section className="max-w-7xl mx-auto px-4 py-8">
      {/* Header Channel */}
      <div className="flex items-center gap-4 mb-6">
        <Image
          src="/yt-logo.png"
          alt="Logo Channel"
          width={70}
          height={70}
          className="rounded-full"
        />
        <div>
          <h2 className="text-xl font-semibold">YouTube • Channel Resmi</h2>
          <p className="text-sm text-gray-600">
            Lebih dari 3.5 juta pengikut • 12k video
          </p>
        </div>

        <a
          href="#"
          className="ml-auto bg-red-600 text-white px-4 py-2 rounded-lg font-semibold"
        >
          Subscribe
        </a>
      </div>

      {/* Grid Video */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {sampleVideos.map((v) => (
          <div key={v.id} className="cursor-pointer">
            <div className="relative w-full h-44">
              <Image
                src={v.thumbnail}
                alt={v.title}
                fill
                className="rounded-lg object-cover"
              />

              <span className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-2 py-1 rounded">
                {v.duration}
              </span>
            </div>

            <h3 className="font-semibold mt-2 leading-tight line-clamp-2">
              {v.title}
            </h3>

            <p className="text-sm text-gray-600">{v.publishedAt}</p>

            <div className="flex items-center gap-4 text-sm text-gray-700 mt-1">
              <span className="flex items-center gap-1">
                <Eye size={16} /> {v.views}
              </span>
              <span className="flex items-center gap-1">
                <Heart size={16} /> {v.likes}
              </span>
              <span className="flex items-center gap-1">
                <MessageCircle size={16} /> {v.comments}
              </span>
            </div>
          </div>
        ))}
      </div>

      {/* Pagination */}
      <div className="flex justify-center mt-8">
        <button className="px-5 py-2 rounded-lg border hover:bg-gray-100">
          Lihat Selanjutnya →
        </button>
      </div>
    </section>
  );
}