"use client";

import { NewsroomCard } from "./NewsroomCard";
import type { NewsroomItem } from "@/types/newsroom";

interface NewsroomGridProps {
  articles: NewsroomItem[];
  loading?: boolean;
  onResetCategory?: () => void;
}

export function NewsroomGrid({
  articles,
  loading = false,
  onResetCategory,
}: NewsroomGridProps) {
  if (loading) {
    return (
      <div className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
        {Array.from({ length: 6 }).map((_, index) => (
          <div
            key={index}
            className="flex flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white p-0 shadow-sm"
          >
            {/* Image Skeleton */}
            <div className="aspect-[16/10] w-full animate-pulse bg-gray-200" />
            {/* Content Skeleton */}
            <div className="flex flex-1 flex-col p-6">
              <div className="mb-3 h-5 w-3/4 animate-pulse rounded bg-gray-200" />
              <div className="mb-4 h-4 w-1/2 animate-pulse rounded bg-gray-200" />
              <div className="space-y-2">
                <div className="h-3 w-full animate-pulse rounded bg-gray-100" />
                <div className="h-3 w-5/6 animate-pulse rounded bg-gray-100" />
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (articles.length === 0) {
    return (
      <div className="flex w-full flex-col items-center justify-center rounded-3xl border border-dashed border-gray-200 bg-gray-50/50 px-6 py-20 text-center">
        <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent/10 text-accent">
          <svg
            className="h-8 w-8"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="1.5"
              d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
            />
          </svg>
        </div>
        <h3 className="mb-2 text-xl font-bold text-gray-900">No Articles Found</h3>
        <p className="mb-6 max-w-md text-sm text-gray-500">
          We couldn&apos;t find any articles matching the selected category. Check back soon for new updates!
        </p>
        {onResetCategory && (
          <button
            type="button"
            onClick={onResetCategory}
            className="rounded-xl bg-accent px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-accent-strong hover:shadow-md"
          >
            View All Categories
          </button>
        )}
      </div>
    );
  }

  return (
    <div className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
      {articles.map((article) => (
        <NewsroomCard key={article._id} article={article} />
      ))}
    </div>
  );
}