"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type ScrollStoryStep = {
  title: string;
  description: string;
};

export type ScrollStoryProps = {
  title: string;
  steps: ScrollStoryStep[];
};

export function ScrollStory({ title, steps }: ScrollStoryProps) {
  const [activeIndex, setActiveIndex] = useState(0);
  const stepRefs = useRef<(HTMLDivElement | null)[]>([]);

  const items = useMemo(
    () =>
      steps.map((step, index) => ({
        ...step,
        id: `${title}-${index}`
      })),
    [steps, title]
  );

  useEffect(() => {
    const nodes = stepRefs.current;
    if (!nodes.length) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const index = Number(entry.target.getAttribute("data-index"));
            if (!Number.isNaN(index)) {
              setActiveIndex(index);
            }
          }
        });
      },
      { rootMargin: "-30% 0px -55% 0px", threshold: 0.2 }
    );

    nodes.forEach((node) => {
      if (node) observer.observe(node);
    });

    return () => {
      observer.disconnect();
    };
  }, [items]);

  return (
    <div className="grid gap-8 lg:grid-cols-[1fr_240px]">
      <div className="space-y-8">
        <h3 className="text-lg font-semibold">{title}</h3>
        {items.map((step, index) => (
          <div
            key={step.id}
            ref={(node) => {
              stepRefs.current[index] = node;
            }}
            data-index={index}
            className={cn(
              "rounded-2xl border border-border/70 bg-card/70 p-5 transition-all duration-200 motion-reduce:transition-none",
              activeIndex === index
                ? "border-primary/40 shadow-[0_12px_40px_-30px_hsl(var(--foreground)/0.4)]"
                : "opacity-70"
            )}
          >
            <p className="text-sm font-semibold">{step.title}</p>
            <p className="mt-2 text-sm text-muted-foreground">{step.description}</p>
          </div>
        ))}
      </div>
      <aside className="surface-panel h-fit space-y-3 p-5">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
          Progreso
        </p>
        <div className="space-y-2">
          {items.map((step, index) => (
            <div
              key={`${step.id}-progress`}
              className={cn(
                "flex items-center gap-2 text-sm",
                index === activeIndex ? "text-primary" : "text-muted-foreground"
              )}
            >
              <span
                className={cn(
                  "h-2 w-2 rounded-full",
                  index === activeIndex ? "bg-primary" : "bg-muted"
                )}
              />
              {step.title}
            </div>
          ))}
        </div>
      </aside>
    </div>
  );
}
Historia con scroll
