"use client";

import { useEffect, useState } from "react";
import api from "@/lib/api";

interface Banner {
  id: number;
  title: string;
  image: string;
  link?: string | null;
  position?: string | null;
  open_in_new_tab?: boolean;
}

export default function HomepageMiddleBanner() {
  const [banner, setBanner] = useState<Banner | null>(null);

  useEffect(() => {
    fetchBanner();
  }, []);

  const fetchBanner = async () => {
    try {
      const res = await api.get("/banners");

      const banners = res.data.data || [];

      const homepageMiddleBanner = banners.find(
        (item: Banner) => item.position === "homepage_middle_banner"
      );

      setBanner(homepageMiddleBanner || null);
    } catch (error) {
      console.error(error);
    }
  };

  if (!banner) return null;

  const BannerContent = (
    <div className="overflow-hidden rounded-3xl shadow-lg hover:shadow-xl transition-all duration-300">
      <img
        src={banner.image}
        alt={banner.title}
        className="w-full h-auto object-cover"
      />
    </div>
  );

  return (
    <section className="">
      <div className="max-w-7xl mx-auto px-4">
        {banner.link ? (
          <a
            href={banner.link}
            target={banner.open_in_new_tab ? "_blank" : "_self"}
            rel="noopener noreferrer"
          >
            {BannerContent}
          </a>
        ) : (
          BannerContent
        )}
      </div>
    </section>
  );
}