"use client";
/**
 * 设置项列表 Section
 *
 * 原始 Dart: lib/ui/core/settings_section.dart
 *
 * 渲染一组 SettingItem：图标 + 标题 + 副标题/值 + 右侧 chevron + 可选 divider。
 */
import { type ReactNode } from "react";

import styles from "./settings-section.module.css";

export interface SettingsItemModel {
  id: string;
  title: string;
  subtitle?: string;
  trailing?: string;
  icon?: ReactNode;
  onClick?: () => void;
  destructive?: boolean;
}

export interface SettingsSectionProps {
  title?: string;
  items: SettingsItemModel[];
}

export function SettingsSection({ title, items }: SettingsSectionProps) {
  return (
    <section className={styles.section}>
      {title ? <h3 className={styles.title}>{title}</h3> : null}
      <ul className={styles.list}>
        {items.map((item, idx) => (
          <li key={item.id}>
            <button
              type="button"
              onClick={item.onClick}
              className={[
                styles.row,
                item.destructive ? styles.destructive : "",
              ]
                .filter(Boolean)
                .join(" ")}
            >
              {item.icon ? (
                <span className={styles.icon}>{item.icon}</span>
              ) : null}
              <span className={styles.body}>
                <span className={styles.rowTitle}>{item.title}</span>
                {item.subtitle ? (
                  <span className={styles.subtitle}>{item.subtitle}</span>
                ) : null}
              </span>
              {item.trailing ? (
                <span className={styles.trailing}>{item.trailing}</span>
              ) : null}
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                aria-hidden="true"
                className={styles.chevron}
              >
                <path
                  d="M9 6l6 6-6 6"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
            {idx < items.length - 1 ? (
              <div className={styles.divider} />
            ) : null}
          </li>
        ))}
      </ul>
    </section>
  );
}