import { Layout } from "./Layout";

type LogsPageProps = {
  service: string;
  logs: string;
};

export const LogsPage = ({ service, logs }: LogsPageProps) => (
  <Layout title="Service Logs">
    <h1>📋 Service Logs</h1>

    <div role="group">
      <a
        href="/logs?service=phone-ap"
        role="button"
        aria-current={service === "phone-ap" ? "true" : undefined}
      >
        📡 WiFi AP
      </a>
      <a
        href="/logs?service=phone-web"
        role="button"
        aria-current={service === "phone-web" ? "true" : undefined}
      >
        🌐 Web Server
      </a>
      <a
        href="/logs?service=phone"
        role="button"
        aria-current={service === "phone" ? "true" : undefined}
      >
        ☎️ Phone App
      </a>
    </div>

    <pre style="margin-top: 1rem;">
      <code>{logs.trim()}</code>
    </pre>
  </Layout>
);
