---
interface Props {
  title?: string;
  showControls?: boolean;
  class?: string;
}

const {
  title = '~/blog',
  showControls = true,
  class: className = ''
} = Astro.props;
---

<div class={`terminal-window rounded-lg overflow-hidden border border-[var(--terminal-border)] bg-[var(--terminal-bg)] ${className}`}>
  <!-- Window Header -->
  <div class="flex items-center justify-between px-4 py-3 border-b border-[var(--terminal-border)] bg-[var(--header-bg)]">
    <div class="flex items-center gap-2">
      {showControls && (
        <div class="flex items-center gap-1.5">
          <span class="w-3 h-3 rounded-full bg-[#ff5f56]"></span>
          <span class="w-3 h-3 rounded-full bg-[#ffbd2e]"></span>
          <span class="w-3 h-3 rounded-full bg-[#27c93f]"></span>
        </div>
      )}
      <span class="ml-2 text-sm text-[var(--text-secondary)] font-mono">{title}</span>
    </div>
  </div>

  <!-- Window Content -->
  <div class="p-4">
    <slot />
  </div>
</div>
