import type { ReactNode } from 'react';
import type { SettingsPageProps } from './types.js';

export function SettingsPage({ productName, sections = [] }: SettingsPageProps): ReactNode {
  return (
    <div data-testid="bl-shell-settings-page" style={{ maxWidth: 700 }}>
      <h1
        style={{
          fontSize: 24,
          fontWeight: 700,
          marginBottom: 24,
          color: 'var(--color-foreground, #111827)',
        }}
      >
        Settings
      </h1>

      {sections.length === 0 && (
        <div
          data-testid="bl-settings-empty"
          style={{
            padding: 32,
            textAlign: 'center',
            color: 'var(--color-muted-foreground, #6b7280)',
            fontSize: 14,
          }}
        >
          No settings configured for {productName}.
        </div>
      )}

      {sections.map((section, i) => (
        <div
          key={i}
          data-testid={`bl-settings-section-${i}`}
          style={{
            padding: 24,
            borderRadius: 12,
            border: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
            marginBottom: 16,
            background: 'var(--color-surface, #fff)',
          }}
        >
          <h2
            style={{
              fontSize: 16,
              fontWeight: 600,
              marginBottom: 4,
              color: 'var(--color-foreground, #111827)',
            }}
          >
            {section.title}
          </h2>
          {section.description && (
            <p
              style={{
                fontSize: 14,
                color: 'var(--color-muted-foreground, #6b7280)',
                marginBottom: 16,
                marginTop: 0,
              }}
            >
              {section.description}
            </p>
          )}
          <div>{section.content}</div>
        </div>
      ))}
    </div>
  );
}