<script setup lang="ts">
defineProps<{
  title?: string
}>()
</script>

<template>
  <div class="rounded-xl border border-border-light dark:border-slate-800 overflow-hidden bg-surface-light dark:bg-surface-elevated shadow-sm">
    <!-- Chrome bar -->
    <div class="flex items-center gap-2 px-4 py-2.5 bg-surface-light-alt dark:bg-surface-alt border-b border-border-light dark:border-slate-800">
      <span class="w-2.5 h-2.5 rounded-full bg-border-light dark:bg-slate-700"></span>
      <span class="w-2.5 h-2.5 rounded-full bg-border-light dark:bg-slate-700"></span>
      <span class="w-2.5 h-2.5 rounded-full bg-border-light dark:bg-slate-700"></span>
      <span v-if="title" class="ml-2 text-xs font-mono text-slate-400 dark:text-slate-500">{{ title }}</span>
    </div>
    <!-- Content -->
    <div class="p-4 sm:p-5 font-mono text-sm leading-relaxed text-slate-700 dark:text-slate-300 overflow-x-auto">
      <slot />
    </div>
  </div>
</template>
