import { useEffect, useState } from 'react';
import { applyThemeMode, getThemeMode, themeModes } from '../utils/themeMode';
import ThemeAccentPicker from '../components/ThemeAccentPicker';

export default function PwaThemeSelector() {
  const [mode, setMode] = useState(getThemeMode);

  useEffect(() => {
    applyThemeMode(mode);
  }, [mode]);

  return (
    <section className="pwa-card-section">
      <div className="pwa-section-title">
        <h2>حالت نمایش</h2>
        <span>{themeModes.find((item) => item.key === mode)?.label}</span>
      </div>
      <div className="pwa-segmented">
        {themeModes.map((item) => (
          <button key={item.key} type="button" className={mode === item.key ? 'active' : ''} onClick={() => setMode(item.key)}>
            {item.label}
          </button>
        ))}
      </div>
      <ThemeAccentPicker />
    </section>
  );
}
