import React from 'react';
import './Sticky.css';

/* 吸顶容器（移动端）— 规格 §39
   用 CSS 原生 position: sticky（不是 JS 监听滚动 + position: fixed）：
   后者在触屏惯性滚动时会抖动，离开文档流后还要手动补占位元素。
   贴合偏移由 --kole-m-sticky-offset 决定（默认导航栏高度），safeArea=true 时叠加安全区。
   is-stuck 由**宿主**按滚动位置切换 —— 组件不监听滚动（sticky 的贴合判定只有浏览器知道）。 */
export default function Sticky({
  position = 'top',
  safeArea = false,
  shadow = false,
  stuck = false,
  title = '',
  actionText = '',
  onAction,
  children = null,
}) {
  const cls =
    'kole-m-sticky' +
    ` kole-m-sticky--${position}` +
    (safeArea ? ' kole-m-sticky--safe' : '') +
    (shadow ? ' kole-m-sticky--shadow' : '') +
    (stuck ? ' is-stuck' : '');

  return (
    <div className={cls} data-stuck={stuck ? 'true' : 'false'}>
      {title ? <span className="kole-m-sticky__title">{title}</span> : null}
      {children}
      {actionText ? (
        <button
          className="kole-m-sticky__action"
          type="button"
          onClick={() => {
            if (onAction) onAction();
          }}
        >
          {actionText}
        </button>
      ) : null}
    </div>
  );
}