/**
 * AppearanceSettings — 外观设置 Tab
 *
 * 从 SettingsModal.tsx 提取（v0.4.1 拆分）。
 * 功能：主题切换（深色/浅色/跟随系统）。
 */

import { Button, Stack, Typography, Box } from '@mui/material';
import type { ThemeMode } from '@renderer/stores/ui-store';

export function AppearanceSettings({
  theme,
  setTheme,
}: {
  theme: ThemeMode;
  setTheme: (t: ThemeMode) => void;
}) {
  return (
    <Stack spacing={2}>
      <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
        外观
      </Typography>
      <Box>
        <Typography variant="caption" sx={{ color: 'text.secondary', mb: 1, display: 'block' }}>
          主题
        </Typography>
        <Stack direction="row" spacing={1}>
          {(['dark', 'light', 'auto'] as ThemeMode[]).map((t) => (
            <Button
              key={t}
              variant={theme === t ? 'contained' : 'outlined'}
              size="small"
              onClick={() => setTheme(t)}
            >
              {t === 'dark' ? '深色' : t === 'light' ? '浅色' : '跟随系统'}
            </Button>
          ))}
        </Stack>
      </Box>
    </Stack>
  );
}