/** The three transport buttons, at two sizes. The glyphs are CSS shapes, as in the
 * mockup - no icon font to load on a device that boots offline. */

interface Props {
  playing: boolean;
  onToggle: () => void;
  onNext: () => void;
  onPrevious: () => void;
  /** Side length of the skip buttons; the play button scales from it. */
  size: number;
  gap: number;
}

export function Transport({ playing, onToggle, onNext, onPrevious, size, gap }: Props) {
  const glyph = Math.round(size * 0.33);
  const bar = Math.max(4, Math.round(size * 0.085));
  const playSize = Math.round(size * 1.26);
  const playBar = Math.max(6, Math.round(playSize * 0.1));
  const playGlyph = Math.round(playSize * 0.37);

  return (
    <div style={{ display: "flex", alignItems: "center", gap }}>
      <button
        className="round"
        onClick={onPrevious}
        aria-label="Vorheriger Titel"
        style={{ width: size, height: size, background: "oklch(30% 0.04 210)" }}
      >
        <span style={{ display: "flex", alignItems: "center", gap: 2 }}>
          <span style={{ width: bar, height: glyph, borderRadius: 1, background: "#fff" }} />
          <span
            style={{
              width: glyph,
              height: glyph,
              background: "#fff",
              clipPath: "polygon(100% 0%, 100% 100%, 0% 50%)",
            }}
          />
        </span>
      </button>

      <button
        className="round"
        onClick={onToggle}
        aria-label={playing ? "Pause" : "Abspielen"}
        style={{
          width: playSize,
          height: playSize,
          background: "var(--accent)",
          boxShadow: "0 6px 20px oklch(70% 0.16 340 / .5)",
        }}
      >
        {playing ? (
          <span style={{ display: "flex", gap: playBar * 0.8 }}>
            <span
              style={{ width: playBar, height: playGlyph, borderRadius: 2, background: "#fff" }}
            />
            <span
              style={{ width: playBar, height: playGlyph, borderRadius: 2, background: "#fff" }}
            />
          </span>
        ) : (
          <span
            style={{
              width: playGlyph,
              height: playGlyph,
              background: "#fff",
              clipPath: "polygon(6% 0%, 100% 50%, 6% 100%)",
            }}
          />
        )}
      </button>

      <button
        className="round"
        onClick={onNext}
        aria-label="Nächster Titel"
        style={{ width: size, height: size, background: "oklch(30% 0.04 210)" }}
      >
        <span style={{ display: "flex", alignItems: "center", gap: 2 }}>
          <span
            style={{
              width: glyph,
              height: glyph,
              background: "#fff",
              clipPath: "polygon(0% 0%, 0% 100%, 100% 50%)",
            }}
          />
          <span style={{ width: bar, height: glyph, borderRadius: 1, background: "#fff" }} />
        </span>
      </button>
    </div>
  );
}