"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";

interface Poster {
  _id: string;
  title: string;
  description?: string;
  image: string;
  link?: string;
  position: string;
}

interface PosterBannerProps {
  position: string; // "home-top", "home-middle", etc.
  className?: string;
}

export default function PosterBanner({ position, className = "" }: PosterBannerProps) {
  const [posters, setPosters] = useState<Poster[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosters = async () => {
      try {
        const response = await fetch(`/api/posters?position=${position}&active=true`);
        const data = await response.json();
        setPosters(data.posters || []);
      } catch (error) {
        console.error("Error fetching posters:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchPosters();
  }, [position]);

  // Don't render if no posters
  if (loading || posters.length === 0) {
    return null;
  }

  return (
    <div className={`poster-banner ${className}`}>
      {posters.map((poster) => {
        const content = (
          <div className="relative w-full h-64 md:h-96 overflow-hidden rounded-lg shadow-lg group">
            <img
              src={poster.image}
              alt={poster.title}
              className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
              onError={(e) => {
                (e.target as HTMLImageElement).style.display = "none";
              }}
            />
            {(poster.title || poster.description) && (
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent flex items-end">
                <div className="p-6 text-white">
                  {poster.title && (
                    <h3 className="text-2xl md:text-3xl font-bold mb-2">{poster.title}</h3>
                  )}
                  {poster.description && (
                    <p className="text-sm md:text-base opacity-90">{poster.description}</p>
                  )}
                </div>
              </div>
            )}
          </div>
        );

        return poster.link ? (
          <Link key={poster._id} href={poster.link} className="block">
            {content}
          </Link>
        ) : (
          <div key={poster._id}>{content}</div>
        );
      })}
    </div>
  );
}