import type { ReactNode } from "react";

export function FrontSurface({ children, className = "", bottom = false, ariaLabel }: {
  children: ReactNode;
  className?: string;
  bottom?: boolean;
  ariaLabel: string;
}) {
  return (
    <section className={`front-surface ${bottom ? "front-surface--bottom" : "front-surface--top"} ${className}`} aria-label={ariaLabel}>
      <div className="front-grain" aria-hidden="true" />
      {children}
    </section>
  );
}

export function BrandMark({ compact = false, tagline = "Answer the call" }: { compact?: boolean; tagline?: string | null }) {
  return (
    <div className={`front-brand ${compact ? "front-brand--compact" : ""}`}>
      <span className="brand-sigil" aria-hidden="true">+</span>
      <span>{tagline && <small>{tagline}</small>}<strong>Healer Man</strong></span>
    </div>
  );
}

export function ControllerLegend({ back = false }: { back?: boolean }) {
  return (
    <div className="controller-legend" aria-label="Controller help">
      <span><b>A</b> Select</span>
      {back && <span><b>B</b> Back</span>}
      <span><b>+</b> Navigate</span>
      <span><b>Select</b> Companion</span>
    </div>
  );
}