import { html, type TemplateResult } from 'lit';
import type { Palette, ThemeMode } from '../../theme.js';

export function renderHeader(
  palette: Palette,
  mode: ThemeMode,
  onPaletteChange: (palette: Palette) => void,
  onModeChange: (mode: ThemeMode) => void,
): TemplateResult {
  return html`
    <header>
      <div class="header-top">
        <div class="header-intro">
          <nui-heading
            class="playground-site-title"
            tag="1"
            text="Nucleify UI Playground"
            unstyled
          ></nui-heading>
          <nui-paragraph
            class="playground-site-description"
            text="Test Lit components – register new ones in src/playground/registry.ts"
            unstyled
          ></nui-paragraph>
        </div>
        ${renderThemeControls(palette, mode, onPaletteChange, onModeChange)}
      </div>
    </header>
  `;
}

function renderThemeControls(
  palette: Palette,
  mode: ThemeMode,
  onPaletteChange: (palette: Palette) => void,
  onModeChange: (mode: ThemeMode) => void,
): TemplateResult {
  return html`
    <div class="theme-controls">
      <div class="control-group">
        <span>Palette</span>
        <button
          aria-pressed=${palette === 'nuxt' ? 'true' : 'false'}
          @click=${() => onPaletteChange('nuxt')}
        >
          Nuxt
        </button>
        <button
          aria-pressed=${palette === 'next' ? 'true' : 'false'}
          @click=${() => onPaletteChange('next')}
        >
          Next
        </button>
      </div>
      <div class="control-group">
        <span>Theme</span>
        <button
          aria-pressed=${mode === 'light' ? 'true' : 'false'}
          @click=${() => onModeChange('light')}
        >
          Light
        </button>
        <button
          aria-pressed=${mode === 'dark' ? 'true' : 'false'}
          @click=${() => onModeChange('dark')}
        >
          Dark
        </button>
      </div>
    </div>
  `;
}