/* ============================================================================
 * 서명전에 — TDS BottomInfo 컴포넌트
 *  · 화면 하단에 면책/디스클레이머/법적 고지 같은 보조 정보를 정리해서 보여줘요.
 *  · 스크롤 끝에서 BottomInfo 색이 페이지 배경과 달라 보이는 일관성 문제를
 *    위쪽에 그라디언트(기본: --bg → 투명)로 자연스럽게 풀어줘요.
 *  · props:
 *      bottomGradient
 *        · 기본: "linear-gradient(var(--bg), rgba(255,255,255,0))"
 *        · "none"           — 그라디언트 비활성 (특수한 경우만 권장)
 *        · "linear-gradient(...)" — 임의 그라디언트 문자열 (TDS 스펙 그대로)
 *      className, style — 패스스루
 *      children         — 본문(주로 리스트/문단)
 *  · 색/사이즈는 components.css 의 .bottom-info 가 토큰으로 담당.
 * ========================================================================== */

const __BOTTOM_INFO_DEFAULT_GRADIENT__ =
  "linear-gradient(var(--bg), rgba(255,255,255,0))";

function BottomInfo({
  bottomGradient,
  className = "",
  style,
  children,
  ...rest
}) {
  // "none" 이면 배경 이미지를 비우고, 값이 없으면 기본 그라디언트 사용.
  const gradient =
    bottomGradient === "none"
      ? "none"
      : bottomGradient || __BOTTOM_INFO_DEFAULT_GRADIENT__;

  const mergedStyle = {
    backgroundImage: gradient === "none" ? "none" : gradient,
    ...(style || {}),
  };

  const cls = ["bottom-info", className].filter(Boolean).join(" ");

  return (
    <div className={cls} style={mergedStyle} role="contentinfo" {...rest}>
      {children}
    </div>
  );
}

window.BottomInfo = BottomInfo;

Object.assign(window, { BottomInfo });