import { type ReactNode } from 'react'
import ThemeToggle from './ThemeToggle'

/**
 * UIWS 이식 화면 래퍼. `.uiws-scope` 컨테이너로 색상 토큰(var(--uiws-*))을 적용하고,
 * 우상단에 다크/라이트 테마 토글을 배치한다. 색상 하드코딩 없음 — 두 모드 모두 정상.
 * CMS 전역 다크 셸과 독립(모듈 스코프) — 전역 테마를 덮어쓰지 않는다.
 */
export default function UiwsLayout({ children }: { children: ReactNode }) {
  return (
    <div
      className="uiws-scope"
      style={{
        background: 'var(--uiws-bg)',
        color: 'var(--uiws-text)',
        minHeight: '100%',
        margin: -24,        // CMS main 패딩(p-6=24px) 상쇄 — 화면 전체 토큰 배경
        padding: 24,
        borderRadius: 0,
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12 }}>
        <div style={{ width: 150 }}>
          <ThemeToggle />
        </div>
      </div>
      {children}
    </div>
  )
}
