---
/**
 * Mac-style app window chrome. Renders the traffic-light dots, an
 * optional URL pill, and a slot for the app body.
 */
interface Props {
  url?: string;
  class?: string;
}
const { url, class: className = '' } = Astro.props;
---
<div class={`app-window ${className}`}>
  <div class="flex items-center gap-2 px-3.5 h-9 border-b border-slate-200/80 bg-[#f8f9fb]">
    <div class="flex items-center gap-1.5">
      <span class="w-3 h-3 rounded-full bg-[#ff5f57] border border-black/5"></span>
      <span class="w-3 h-3 rounded-full bg-[#febc2e] border border-black/5"></span>
      <span class="w-3 h-3 rounded-full bg-[#28c840] border border-black/5"></span>
    </div>
    {url && (
      <div class="mx-auto inline-flex items-center gap-2 h-6 px-3 rounded-md bg-white border border-slate-200/80 text-[11.5px] text-slate-500 font-mono">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        {url}
      </div>
    )}
    <div class="w-12"></div>
  </div>
  <slot />
</div>
