import { html } from '../lib/preact.js';

export function EmptyState() {
  return html`
    <div class="glass-panel mx-auto flex max-w-2xl flex-col items-center justify-center rounded-3xl px-8 py-20 text-center">
      <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-selection/80 bg-bg/40 shadow-halo">
        <svg class="h-9 w-9 text-dim" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
        </svg>
      </div>
      <h2 class="mb-2 font-display text-2xl font-semibold text-bright">No Active Sessions</h2>
      <p class="max-w-lg text-dim">
        Agent sessions will appear here when they connect. Start a Claude Code session to see it in the dashboard.
      </p>
    </div>
  `;
}