"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import axios from "axios";

export default function Banner({ componentName = "Banner", className = "" }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const res = await axios.get("/api/get-component-data", {
          params: { component_name: componentName },
        });
        setData(res.data.data);
      } catch (err) {
        setError(`Failed to fetch ${componentName} data`);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [componentName]);

  if (loading) return null;
  if (error) return null;
  if (!data) return null;

  const bannerImg = data.image;

  return (
    <section
      className={`wrapper image-wrapper bg-image bg-overlay !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)] ${className}`}
      style={{ backgroundImage: `url(${bannerImg})` }}
    >
      <div className="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] pb-32 xl:pb-40 lg:pb-40 md:pb-40 !text-center">
        <div className="flex flex-wrap mx-[-15px]">
          <div className="md:w-10/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
            <h1 className="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !text-white !mb-3">
              {data.title}
            </h1>
            <p className="lead text-[1.05rem] !leading-[1.6] font-medium md:!px-3 lg:!px-7 xl:!px-9 xxl:!px-10">
              {data.description}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}