export const THEMES = [
  { id: 'mocha', label: 'Mocha', base: '#1e1e2e' },
  { id: 'macchiato', label: 'Macchiato', base: '#24273a' },
  { id: 'frappe', label: 'Frappé', base: '#303446' },
  { id: 'latte', label: 'Latte', base: '#eff1f5' },
] as const;
export type Theme = typeof THEMES[number]['id'];
export const THEME_STORAGE_KEY = 'wikideck-theme';
export const DEFAULT_THEME: Theme = 'mocha';

export function isTheme(value: unknown): value is Theme {
  return THEMES.some(theme => theme.id === value);
}
export function resolveTheme(value: unknown): Theme {
  return isTheme(value) ? value : DEFAULT_THEME;
}
export function applyTheme(theme: Theme) {
  document.documentElement.dataset.theme = theme;
  document.documentElement.style.colorScheme = theme === 'latte' ? 'light' : 'dark';
  document.querySelector('meta[name="theme-color"]')?.setAttribute('content', THEMES.find(t => t.id === theme)!.base);
}