import React from "react";
import MovieCard from "./MovieCard";
import SkeletonCard from "./SkeletonCard";
import { Movie } from "@/types/movie";

interface MovieGridProps {
  title?: string;
  movies: Movie[];
  isLoading?: boolean;
  skeletonCount?: number;
  emptyMessage?: string;
}

export default function MovieGrid({
  title,
  movies,
  isLoading = false,
  skeletonCount = 12,
  emptyMessage = "No movies found in this section.",
}: MovieGridProps) {
  return (
    <div className="w-100">
      {title && (
        <h2 className="text-white fw-bold mb-4 text-gradient border-start border-danger border-4 ps-3">
          {title}
        </h2>
      )}

      {/* Grid container */}
      <div className="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-4">
        {isLoading
          ? // Render Skeletons
            Array.from({ length: skeletonCount }).map((_, idx) => (
              <div key={`skeleton-${idx}`} className="col">
                <SkeletonCard />
              </div>
            ))
          : // Render Movie Cards
            movies.map((movie) => (
              <div key={movie.id} className="col d-flex">
                <MovieCard movie={movie} />
              </div>
            ))}
      </div>

      {/* Empty State */}
      {!isLoading && movies.length === 0 && (
        <div className="text-center py-5 my-5">
          <div className="d-inline-flex align-items-center justify-content-center bg-dark text-muted rounded-circle p-4 mb-3 border border-secondary" style={{ width: "80px", height: "80px" }}>
            <i className="bi bi-camera-reels fs-1"></i>
          </div>
          <h4 className="text-white fw-semibold mb-2">No Results Found</h4>
          <p className="text-white small mx-auto" style={{ maxWidth: "360px" }}>
            {emptyMessage}
          </p>
        </div>
      )}
    </div>
  );
}