import type { CSSProperties } from 'react'
import {
  cssVarNameForPhase,
  isValidHexColor,
  type PhaseConfigEntry,
} from '@/lib/intake/phase-config'

type Props = {
  entries: PhaseConfigEntry[]
  children: React.ReactNode
  className?: string
}

export default function PhaseConfigScope({ entries, children, className }: Props) {
  const style = buildCssVarStyle(entries)
  return (
    <div data-phase-config-scope className={className} style={style}>
      {children}
    </div>
  )
}

function buildCssVarStyle(entries: PhaseConfigEntry[]): CSSProperties {
  const style: Record<string, string> = {}
  for (const e of entries) {
    if (!e.is_active) continue
    if (!isValidHexColor(e.color_hex)) continue
    style[cssVarNameForPhase(e.phase_key)] = e.color_hex
  }
  return style as CSSProperties
}