import ImageWithFallback from "@/shared/ImageWithFallback";
import { ZakatSectionProps } from "./types";

export default function ZakatSection({ zakatData }: ZakatSectionProps) {
  return (
    <section className="relative h-56 sm:h-72 lg:h-[400px] overflow-hidden">
      <ImageWithFallback
        src={zakatData.backgroundImage ?? ""}
        alt=""
        fill
        className="object-cover object-left"
        sizes="100vw"
      />

      <div
        className="absolute inset-0"
        style={{
          background:
            "linear-gradient(to right, transparent 0%, transparent 40%, rgba(112, 25, 44, 0.55) 58%, #70192C 72%, #70192C 100%)",
        }}
      />

      <div className="absolute inset-0 flex items-center justify-start ps-8 lg:ps-16 pe-4">
        <div data-aos="fade-left" className="text-start max-w-xs lg:max-w-md">
          <p className="text-white text-2xl sm:text-3xl lg:text-4xl font-bold leading-snug">
            {zakatData.title}
          </p>
          {zakatData.description && (
            <div
              className="text-white/90 text-lg sm:text-xl lg:text-2xl font-medium mt-2 leading-snug [&_p]:mb-1"
              dangerouslySetInnerHTML={{ __html: zakatData.description }}
            />
          )}
        </div>
      </div>
    </section>
  );
}