import type { ReactNode, Ref } from "react";
import { cx } from "../../utils";

export interface FoxSnackbarListProps {
  /** 묶음을 읽어 줄 이름. 화면에 보이는 제목이 이미 있으면 `labelledBy`를 쓴다. */
  label?: string;
  /** 묶음 이름 역할을 하는 요소의 id. `label`보다 우선한다 — 화면의 글자와 어긋나지 않는다. */
  labelledBy?: string;
  /** `FoxSnackbar`들. */
  children?: ReactNode;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. 띄우는 자리(fixed·bottom 등)와 시안의 폭(640px)을 여기로 덮는다. */
  className?: string;
  ref?: Ref<HTMLDivElement>;
}

/**
 * @fox 스낵바 묶음. 스낵바가 여러 개일 때 세로로 쌓는다. 배치만 책임지고 상태를 갖지 않는다 —
 * 무엇이 몇 개 떠 있는지, 어떤 순서로 쌓을지는 호출부가 소유한다.
 *
 * 자식에게 덮어쓰는 값이 없다(`FoxTagList`·`FoxChipArea`와 다른 점이다) — 스낵바에는 계열도
 * 크기도 없어서 묶음이 통일할 것이 폭과 간격뿐이다.
 *
 * 방향 수식어가 없다 — 스낵바는 세로로 쌓이는 것이 유일한 배치다.
 *
 * `role="group"`이다. 각 스낵바가 스스로 `role="status"`로 읽히므로 묶음은 자리만 만든다 —
 * 묶음까지 live region으로 만들면 하나가 뜰 때마다 목록 전체가 다시 읽힌다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxSnackbarList({
  label,
  labelledBy,
  children,
  hidden = false,
  className,
  ref,
}: FoxSnackbarListProps) {
  if (hidden) {
    return null;
  }

  return (
    <div
      ref={ref}
      role="group"
      aria-label={labelledBy ? undefined : label}
      aria-labelledby={labelledBy}
      className={cx("fox-snackbar-list", className)}
    >
      {children}
    </div>
  );
}