import { useEffect } from 'react'
import { useEditor } from '@/context/EditorContext'

export const PALETTE = [
  ['primary','Couleur principale'],
  ['primary-foreground','Texte sur la couleur principale'],
  ['background','Fond du site'],
  ['foreground','Texte principal'],
  ['card','Fond des cartes'],
  ['card-foreground','Texte des cartes'],
  ['accent','Accent'],
  ['muted','Fond secondaire'],
  ['border','Bordures'],
]

export function CmsTheme() {
  const { content } = useEditor()
  useEffect(() => {
    for (const mode of ['light', 'dark']) {
      const themeTarget = mode === 'light' ? document.documentElement : document.documentElement
      for (const [name] of PALETTE) {
        const value = content[`theme.${mode}.${name}`]
        // CSS variables du mode sombre sont appliquées par une feuille dédiée.
        const property = mode === 'light' ? `--cms-light-${name}` : `--cms-dark-${name}`
        if (value && /^#[a-fA-F0-9]{6}$/.test(value)) themeTarget.style.setProperty(property, value)
        else themeTarget.style.removeProperty(property)
      }
    }
  }, [content])
  return null
}