/* global React, Icon, Placeholder, Logo */

// status bar
const MStatus = ({ light = true }) => (
  <div className="m-status" style={{ color: light ? "#fff" : "#000" }}>
    <span>9:41</span>
    <div className="right">
      <svg viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="6" width="3" height="6" rx="0.5"/><rect x="5" y="4" width="3" height="8" rx="0.5"/><rect x="10" y="2" width="3" height="10" rx="0.5"/><rect x="15" y="0" width="3" height="12" rx="0.5"/></svg>
      <svg viewBox="0 0 16 12" fill="currentColor"><path d="M8 2C5.79 2 3.77 2.81 2.22 4.15c-.41.36-.42.99-.02 1.36s1.04.38 1.45.03C4.92 4.42 6.4 3.8 8 3.8s3.08.62 4.35 1.74c.41.35 1.05.34 1.45-.03s.39-1-.02-1.36C12.23 2.81 10.21 2 8 2zm0 4c-1.31 0-2.51.46-3.44 1.22-.42.34-.43.97-.04 1.34s1 .39 1.43.06C6.6 8.16 7.27 7.8 8 7.8s1.4.36 2.05.82c.43.33 1.04.31 1.43-.06s.38-1-.04-1.34C10.51 6.46 9.31 6 8 6zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/></svg>
      <svg viewBox="0 0 25 12" fill="none" stroke="currentColor" strokeWidth="1"><rect x="0.5" y="0.5" width="20" height="11" rx="2.5"/><rect x="2" y="2" width="14" height="8" rx="1" fill="currentColor"/><rect x="22" y="3.5" width="2" height="5" rx="1" fill="currentColor"/></svg>
    </div>
  </div>
);

// bottom nav
const MNav = ({ active = "Home" }) => {
  const items = [
    { l: "Home", i: "home" },
    { l: "Search", i: "search" },
    { l: "Library", i: "library" },
    { l: "Playlists", i: "list" },
    { l: "Profile", i: "user" },
  ];
  return (
    <div className="m-nav">
      {items.map(it => (
        <button key={it.l} className={`m-nav-item ${active === it.l ? "is-active" : ""}`}>
          <Icon name={it.i} size={18} />
          {it.l}
        </button>
      ))}
    </div>
  );
};

window.MStatus = MStatus;
window.MNav = MNav;