import { SectionHeading } from "@/components/ui/section-heading"
import { SettingsPanelBlock } from "@/components/blocks/settings-panel-block"
import { ComponentContainer } from "@/components/ui/component-container"

export function SettingsPanelSection() {
  return (
    <section id="settings-panel" className="space-y-6">
      <SectionHeading
        title="Settings Panel"
        description="A tabbed interface for managing user preferences and account settings."
      />

      <ComponentContainer>
        <SettingsPanelBlock />
      </ComponentContainer>

      <div className="space-y-4">
        <h3 className="text-lg font-medium">Usage Guidelines</h3>
        <div className="bg-muted/30 p-4 rounded-lg space-y-2">
          <ul className="list-disc pl-5 space-y-2">
            <li>
              <strong>Organization:</strong> Group related settings into logical categories using tabs or sections to
              reduce cognitive load.
            </li>
            <li>
              <strong>Clear Labeling:</strong> Use descriptive labels and helper text to explain what each setting
              controls.
            </li>
            <li>
              <strong>Default Values:</strong> Provide sensible default values for all settings to minimize the effort
              required from users.
            </li>
            <li>
              <strong>Immediate Feedback:</strong> Show visual confirmation when settings are saved or when errors
              occur.
            </li>
            <li>
              <strong>Reversibility:</strong> Allow users to easily revert changes or reset to defaults if they make
              mistakes.
            </li>
            <li>
              <strong>Progressive Disclosure:</strong> Hide advanced settings behind expandable sections to avoid
              overwhelming users.
            </li>
            <li>
              <strong>Consistency:</strong> Use consistent UI patterns for similar types of settings (toggles for
              boolean values, dropdowns for selections, etc.).
            </li>
            <li>
              <strong>Accessibility:</strong> Ensure all form controls are properly labeled and keyboard accessible.
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}