// Reusable atoms (no-price version): cards, pills, tiles, slider.

const SectionHead = ({ index, title, hint }) =>
<div className="sec-head">
    <span className="sec-idx">{String(index).padStart(2, '0')}</span>
    <div>
      <h3>{title}</h3>
      {hint && <p>{hint}</p>}
    </div>
  </div>;


const ChoiceCard = ({ active, onClick, icon, title, sub }) =>
<button
  type="button"
  className={`choice ${active ? 'is-active' : ''}`}
  onClick={onClick}>
  
    {icon && <span className="choice-icon">{icon}</span>}
    <span className="choice-body">
      <span className="choice-title">{title}</span>
      {sub && <span className="choice-sub">{sub}</span>}
    </span>
    <span className="choice-check" aria-hidden="true">
      <Glyph name="check" size={12} />
    </span>
  </button>;


const Pill = ({ active, onClick, children }) =>
<button
  type="button"
  className={`pill ${active ? 'is-active' : ''}`}
  onClick={onClick} style={{ backgroundColor: "rgb(31, 111, 235)" }}>
  
    <span>{children}</span>
  </button>;


const FeatureTile = ({ active, onClick, name, desc }) =>
<button
  type="button"
  className={`tile ${active ? 'is-active' : ''}`}
  onClick={onClick}>
  
    <span className="tile-box" aria-hidden="true">
      {active && <Glyph name="check" size={14} />}
    </span>
    <span className="tile-body">
      <span className="tile-title">{name}</span>
      <span className="tile-desc">{desc}</span>
    </span>
  </button>;


const PagesSlider = ({ value, min, max, onChange, defaultIncluded }) => {
  const pct = (value - min) / (max - min) * 100;
  return (
    <div className="pages-slider">
      <div className="pages-row">
        <button
          type="button"
          className="pages-btn"
          onClick={() => onChange(Math.max(min, value - 1))}
          aria-label="Меньше">
          
          <Glyph name="minus" size={14} />
        </button>
        <div className="pages-val">
          <strong>{value}</strong>
          <span>{pageWord(value)}</span>
        </div>
        <button
          type="button"
          className="pages-btn"
          onClick={() => onChange(Math.min(max, value + 1))}
          aria-label="Больше">
          
          <Glyph name="plus" size={14} />
        </button>
      </div>
      <div className="pages-track">
        <input
          type="range"
          min={min}
          max={max}
          value={value}
          onChange={(e) => onChange(parseInt(e.target.value, 10))} />
        
        <div className="pages-track-fill" style={{ width: `${pct}%` }} />
      </div>
      <div className="pages-legend">
        <span>{min}</span>
        <span className="pages-included">примерно нужно</span>
        <span>{max}+</span>
      </div>
    </div>);

};

Object.assign(window, {
  SectionHead, ChoiceCard, Pill, FeatureTile, PagesSlider
});