<template>
  <div class="mb-3">
    <div class="text-[10px] font-semibold text-[var(--text-weak)] uppercase tracking-[1.5px] mb-1 pl-0.5">布局</div>
    <div class="bg-[var(--card-bg)] border border-[var(--card-border)] rounded-lg">
      <div class="flex justify-between items-center px-3.5 py-2">
        <div class="text-xs font-medium text-[var(--text-muted)]">信息布局</div>
        <select v-model="s.layout" @change="go.saveLayout(s.layout)"
          class="bg-[var(--input-bg)] border border-[var(--input-border)] rounded-md text-[var(--text)] text-[11px] py-0.5 px-1.5 outline-none min-w-[80px] max-w-[160px] focus:border-[var(--input-border-focus)]">
          <option value="single">合并卡片</option>
          <option value="multi">独立卡片</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { go } from '../composables/useGoBridge'
import type { SettingsData } from '@shared/types'
defineProps<{ s: SettingsData }>()
</script>
