import { fetchComponentData, downloadToLocal } from "@/utils/data";

export default async function Banner({ componentName = "Banner", className = "" }) {
  const res = await fetchComponentData(componentName);
  const data = res.data;

  if (!data) return null;

  // 仅针对背景图片进行本地化处理
  const bannerImg = data.image ? await downloadToLocal(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 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>
  );
}