"use client";

import { useState } from "react";
import type { GoalStory } from "@/lib/stories";

/**
 * Full-bleed background video for a goal story, with a legibility scrim and a
 * graceful gradient fallback (used while loading or if the video fails).
 * Reusable: fills whatever positioned container it's placed in.
 */
export function StoryBackdrop({ story, dim = "strong" }: { story: GoalStory; dim?: "strong" | "soft" }) {
  const [failed, setFailed] = useState(false);

  return (
    <div className="absolute inset-0 overflow-hidden" aria-hidden>
      {/* gradient fallback always behind the video */}
      <div className={`absolute inset-0 bg-gradient-to-br ${story.fallback}`} />
      {!failed && (
        <video
          key={story.id}
          className="absolute inset-0 h-full w-full scale-105 object-cover"
          src={story.video}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          onError={() => setFailed(true)}
        />
      )}
      {/* scrim for text legibility */}
      <div
        className={
          dim === "strong"
            ? "absolute inset-0 bg-gradient-to-r from-[#08130f]/85 via-[#08130f]/60 to-[#08130f]/30"
            : "absolute inset-0 bg-gradient-to-t from-[#08130f]/80 via-[#08130f]/35 to-transparent"
        }
      />
    </div>
  );
}