sozsoft-platform/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx

import ModeSwitcher from './ModeSwitcher'
import LayoutSwitcher from './LayoutSwitcher'
import ThemeSwitcher from './ThemeSwitcher'
import DirectionSwitcher from './DirectionSwitcher'
import NavModeSwitcher from './NavModeSwitcher'
import StyleSwitcher from './StyleSwitcher'
import React, { useState, useCallback } from 'react'
import { useLocalization } from '@/utils/hooks/useLocalization'

export type ThemeConfiguratorProps = {
  callBackClose?: () => void
}


const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
  const { translate } = useLocalization()
  const [modeKey, setModeKey] = useState(0)

  // StyleSwitcher'dan tetiklenecek
  const handleStyleChange = useCallback(() => {
    setModeKey((prev) => prev + 1)
  }, [])

  return (
    <div className="flex flex-col h-full justify-between">
      <div className="flex flex-col gap-y-3 mb-2">
        <div>
          <h6 className="mb-3">{translate('::App.SiteManagement.Theme.Style')}</h6>
          <StyleSwitcher onStyleChange={handleStyleChange} />
        </div>
        <div>
          <h6 className="mb-3">{translate('::SidePanel.NavMode')}</h6>
          <NavModeSwitcher />
        </div>
        <div>
          <h6 className="mb-3">{translate('::SidePanel.Themed')}</h6>
          <ThemeSwitcher />
        </div>
        <div className="flex items-center justify-between">
          <div>
            <h6>{translate('::SidePanel.Mode')}</h6>
            <span>{translate('::SidePanel.Mode.Description')}</span>
          </div>
          <ModeSwitcher key={modeKey} />
        </div>
        <div className="flex items-center justify-between">
          <div>
            <h6>{translate('::SidePanel.Direction')}</h6>
            <span>{translate('::SidePanel.Direction.Description')}</span>
          </div>
          <DirectionSwitcher callBackClose={callBackClose} />
        </div>
        <div>
          <h6 className="mb-3">{translate('::SidePanel.Layout')}</h6>
          <LayoutSwitcher />
        </div>
      </div>
    </div>
  )
}

export default ThemeConfigurator