import { INK, SKY } from "../theme";

/*
 * Tabbalk: items = [{ id, label }].
 *
 * `bottom` zet hem onderaan het scherm (de correspondentie: brieven ↔ schrijven). Daar hoort de
 * streep bóven de balk in plaats van eronder, en de home-indicator van de telefoon blijft vrij —
 * de balk staat buiten het scrollvlak, dus die inset moet hier geregeld worden.
 */
export default function Tabs({ items, active, onSelect, bottom = false }) {
  return (
    <nav
      style={
        bottom
          ? {
              display: "flex",
              borderTop: `2px solid ${INK}`,
              background: "#fff",
              paddingBottom: "env(safe-area-inset-bottom, 0px)",
            }
          : { display: "flex", borderTop: `1px solid ${SKY}`, borderBottom: `2px solid ${INK}` }
      }
    >
      {items.map(({ id, label }) => (
        <button
          key={id}
          onClick={() => onSelect(id)}
          aria-current={active === id ? "page" : undefined}
          style={{
            flex: 1, padding: "12px 4px", border: "none", fontSize: 14, fontWeight: 600,
            background: active === id ? INK : "transparent", color: active === id ? "#fff" : INK,
            transition: "background 120ms",
          }}
        >
          {label}
        </button>
      ))}
    </nav>
  );
}