import { Icons } from './icons';

export function SettingModal() {
  return (
    <div class="wm-modal" x-show="modals.settings" x-cloak {...{ 'x-transition.opacity.duration.300ms': '' }}>
      <div class="wm-modal-mask" data-close-modal="settings"></div>
      <section class="wm-modal-card settings-card" role="dialog" aria-modal="true" aria-labelledby="settings-title">
        <button class="modal-close" type="button" data-close-modal="settings" aria-label="关闭">{Icons.close()}</button>
        <h2 id="settings-title">设置</h2>
        <div class="setting-row">
          <div>
            <strong>暗黑模式</strong>
            <span>刷新后保持</span>
          </div>
          <label class="switch">
            <input type="checkbox" data-theme-toggle />
            <i></i>
          </label>
        </div>
      </section>
    </div>
  );
}
