"use client";

// Adapted from Kokonut UI (@dorianbaffier), MIT. See THIRD_PARTY_NOTICES.md.
import {
  Children,
  useId,
  useState,
  type ComponentProps,
  type CSSProperties,
} from "react";
export interface CardStackProps extends ComponentProps<"div"> {
  defaultExpanded?: boolean;
  expandLabel?: string;
  collapseLabel?: string;
}
export function CardStack({
  children,
  defaultExpanded = false,
  expandLabel = "Expand cards",
  collapseLabel = "Collapse cards",
  className = "",
  ...props
}: CardStackProps) {
  const [expanded, setExpanded] = useState(defaultExpanded);
  const id = useId();
  const cards = Children.toArray(children);
  return (
    <div
      {...props}
      className={`ynr-card-stack ${className}`}
      data-expanded={expanded}
    >
      <div id={id} className="ynr-card-stack-items">
        {cards.map((card, i) => (
          <div
            key={i}
            className="ynr-card-stack-item"
            inert={!expanded && i > 0}
            aria-hidden={!expanded && i > 0}
            style={
              {
                "--stack-index": Math.min(i, 3),
                zIndex: cards.length - i,
              } as CSSProperties
            }
          >
            {card}
          </div>
        ))}
      </div>
      <button
        type="button"
        className="ynr-effect-control"
        aria-controls={id}
        aria-expanded={expanded}
        disabled={cards.length < 2}
        onClick={() => setExpanded(!expanded)}
      >
        {expanded ? collapseLabel : expandLabel}
      </button>
    </div>
  );
}