aiops/frontend/src/components/layout/ThemePicker.tsx

// 全局主题选择器 — Header / Login 共用，分组展示主流与开发者主题 // Logan.Li
import { Check } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { THEME_GROUPS, type ThemePreference } from '@/utils/theme';

interface ThemePickerProps {
  value: ThemePreference;
  onChange: (theme: ThemePreference) => void;
}

export function ThemePicker({ value, onChange }: ThemePickerProps) {
  return (
    <>
      {THEME_GROUPS.map((group, gi) => (
        <div key={group.label}>
          {gi > 0 && <DropdownMenuSeparator className="bg-[var(--border-default)]" />}
          <DropdownMenuLabel className="text-xs dg-text-muted font-normal py-1">
            {group.label}
          </DropdownMenuLabel>
          {group.options.map((option) => (
            <DropdownMenuItem
              key={option.id}
              className={cn(
                'flex items-center gap-2.5 cursor-pointer transition-colors',
                'focus:bg-[var(--surface-hover)] focus:text-[var(--text-primary)]',
                value === option.id
                  ? 'text-[var(--text-primary)]'
                  : 'dg-text-secondary',
              )}
              onClick={() => onChange(option.id)}
            >
              <span
                className="w-3.5 h-3.5 rounded-full shrink-0"
                style={{
                  background: option.primaryColor.startsWith('linear')
                    ? option.primaryColor
                    : option.primaryColor,
                  boxShadow: '0 0 0 2px var(--surface-canvas)',
                }}
              />
              <div className="flex-1 min-w-0">
                <span className="text-sm font-medium">{option.name}</span>
                <span className="block text-xs dg-text-muted truncate">
                  {option.description}
                </span>
              </div>
              {value === option.id && (
                <Check className="h-4 w-4 text-[var(--brand)] shrink-0" />
              )}
            </DropdownMenuItem>
          ))}
        </div>
      ))}
    </>
  );
}