// components/primitives.jsx — shared ShadCN-ish atoms
// Each component is exported to window so other Babel scripts can use them.

const { useEffect, useRef } = React;

function Card({ children, className = '', style = {}, collapsed = false }) {
  return (
    <div
      className={`sc-card ${collapsed ? 'sc-card-collapsed' : ''} ${className}`}
      style={style}>
      
      {children}
    </div>);

}

function CardHeader({ children, className = '' }) {
  return <div className={`sc-card-hd ${className}`}>{children}</div>;
}

function CardTitle({ children }) {
  return <div className="sc-card-title">{children}</div>;
}

function CardDescription({ children }) {
  return <div className="sc-card-desc">{children}</div>;
}

function CardContent({ children, className = '' }) {
  return <div className={`sc-card-ct ${className}`}>{children}</div>;
}

function Separator({ className = '' }) {
  return <div className={`sc-sep ${className}`} />;
}

function Badge({ children, variant = 'secondary', className = '' }) {
  return <span className={`sc-badge sc-badge-${variant} ${className}`}>{children}</span>;
}

function Button({ children, onClick, variant = 'default', size = 'default', className = '', title, disabled }) {
  return (
    <button
      type="button"
      title={title}
      disabled={disabled}
      onClick={onClick}
      className={`sc-btn sc-btn-${variant} sc-btn-${size} ${className}`}>
      
      {children}
    </button>);

}

function Switch({ checked, onChange, id }) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      id={id}
      onClick={() => onChange(!checked)}
      className={`sc-switch ${checked ? 'on' : ''}`}>
      
      <span className="sc-switch-thumb" />
    </button>);

}

function ToggleGroup({ value, onChange, options }) {
  return (
    <div className="sc-toggle-group" role="group">
      {options.map((o) =>
      <button
        key={o.value}
        type="button"
        aria-pressed={value === o.value}
        className={`sc-toggle-item ${value === o.value ? 'active' : ''}`}
        onClick={() => onChange(o.value)}>
        
          {o.label}
        </button>
      )}
    </div>);

}

function Slider({ value, min, max, step = 1, onChange }) {
  const pct = (value - min) / (max - min) * 100;
  return (
    <div className="sc-slider">
      <input
        type="range"
        value={value}
        min={min}
        max={max}
        step={step}
        onChange={(e) => onChange(parseFloat(e.target.value))}
        style={{ '--pct': `${pct}%` }} />
      
    </div>);

}

function Sheet({ open, onClose, children }) {
  return (
    <>
      <div className={`sc-sheet-overlay ${open ? 'open' : ''}`} onClick={onClose} />
      <aside className={`sc-sheet ${open ? 'open' : ''}`} aria-hidden={!open}>
        {children}
      </aside>
    </>);

}

function CollapseBtn({ collapsed, onClick }) {
  return (
    <button
      type="button"
      className="sc-collapse-btn"
      onClick={onClick}
      title={collapsed ? 'Expand' : 'Collapse'}
      aria-label={collapsed ? 'Expand' : 'Collapse'}
      aria-expanded={!collapsed}>
      
      <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
      style={{ transform: collapsed ? 'rotate(-90deg)' : 'none', transition: 'transform .2s' }}>
        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.4"
        strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>);

}

function Collapsible({ open, children }) {
  return (
    <div className={`sc-collapsible ${open ? 'open' : 'closed'}`}>
      <div className="sc-collapsible-inner">{children}</div>
    </div>);

}

function Kbd({ children }) {
  return <kbd className="sc-kbd">{children}</kbd>;
}

Object.assign(window, {
  Card, CardHeader, CardTitle, CardDescription, CardContent,
  Separator, Badge, Button, Switch, ToggleGroup, Slider, Sheet,
  CollapseBtn, Collapsible, Kbd
});