import type { WeddingHeroData } from "@/lib/strapi/types"

export default function WeddingHero({ data }: { data: WeddingHeroData }) {
  const parts = data.heading.split(" ")
  const first = parts[0]
  const rest = parts.slice(1).join(" ")

  return (
    <section className="relative w-full h-[676px] md:h-[711px] overflow-hidden">
      {data.videoUrl ? (
        <video
          src={data.videoUrl}
          autoPlay
          muted
          loop
          playsInline
          className="absolute inset-0 w-full h-full object-cover"
        />
      ) : null}
      <div
        className="absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse at center, rgba(8,19,37,0.5) 0%, rgba(8,19,37,0) 70%)",
        }}
      />
      <div className="relative flex items-center justify-center h-full px-2 md:px-[72px]">
        <h1 className="font-serif text-white text-[44px] md:text-[64px] leading-[1.12] md:leading-[1.04] tracking-[-1.32px] md:tracking-[-1.92px] text-center">
          {first}
          {rest ? (
            <>
              {" "}
              <br className="md:hidden" />
              {rest}
            </>
          ) : null}
        </h1>
      </div>
    </section>
  )
}