// ============================================================
// ThemeSetting — 主题切换区块
// ============================================================

import { Card, Segmented, Typography } from 'antd';
import { BulbOutlined, BulbFilled } from '@ant-design/icons';
import { useTheme } from '@/app/providers/ThemeProvider';

const { Text } = Typography;

export function ThemeSetting() {
   const { isDark, setLight, setDark } = useTheme();

   return (
      <Card size="small" title="主题设置" className="rounded-md!">
         <div className="flex items-center justify-between">
            <Text type="secondary" className="text-sm">
               {isDark ? '🌙 当前使用暗色模式' : '☀️ 当前使用亮色模式'}
            </Text>
            <Segmented
               value={isDark ? 'dark' : 'light'}
               onChange={(val) => {
                  if (val === 'dark') setDark();
                  else setLight();
               }}
               options={[
                  { label: '亮色', value: 'light', icon: <BulbOutlined /> },
                  { label: '暗色', value: 'dark', icon: <BulbFilled /> },
               ]}
            />
         </div>
      </Card>
   );
}
