import { DashboardShell } from '../../../components/dashboard-shell';
import { webhookLogs } from '../../../lib/mock-data';

export default async function WebhooksPage() {
  return (
    <DashboardShell currentPath="/dashboard/webhooks/logs">
      <section className="page-header">
        <div>
          <p className="page-eyebrow">Webhooks</p>
          <h1 className="page-heading">Webhook Logs</h1>
          <p className="page-copy">Inbound event visibility, payload sampling, and retry monitoring.</p>
        </div>
      </section>

      <section className="dashboard-two-column">
        <article className="surface-card">
          <div className="data-table">
            <div className="data-row data-row-head webhook-grid">
              <span>Provider</span>
              <span>Event</span>
              <span>Status</span>
              <span>Time</span>
            </div>
            {webhookLogs.map((log) => (
              <div key={log.id} className="data-row webhook-grid">
                <span>{log.provider}</span>
                <span>{log.event}</span>
                <span><span className="status-pill neutral">{log.status}</span></span>
                <span>{log.time}</span>
              </div>
            ))}
          </div>
        </article>

        <article className="surface-card code-card">
          <div className="card-head">
            <h2>Payload Preview</h2>
            <span className="soft-chip">evt_1003</span>
          </div>
          <pre>{`{
  "provider": "qontak",
  "event_type": "message.failed",
  "external_message_id": "wamid.xxx",
  "timestamp": "2026-05-09T09:28:00.000Z",
  "payload": {
    "error_code": "THROTTLED",
    "retry_count": 2
  }
}`}</pre>
        </article>
      </section>
    </DashboardShell>
  );
}