# SettingPagePane

A presentational component that wraps its children within a styled pane dedicated to a settings section. **SettingPagePane** is most commonly used to wrap a **SettingsPage** component, which handles the logic for fetching and managing settings data. However, it is not strictly required to wrap a **SettingsPage**—any valid React content can be used as children.

This component leverages the `Pane` component from `@folio/stripes/components` to provide a consistent layout and styling for different settings pages. Additionally, it integrates internationalization by using the `useKintIntl` hook along with the `toCamelCase` utility to generate a pane title based on the provided `sectionName`.

## Basic Usage

Wrap your settings-related content inside **SettingPagePane**. It is common to use this component as a wrapper for **SettingsPage**; however, you can also use it to contain any other content.

```jsx
import SettingsPage from './SettingsPage';

const GeneralSettings = () => (
  <SettingPagePane sectionName="general">
    {/* In typical usage, SettingsPage is rendered inside SettingPagePane */}
    <SettingsPage sectionName="general" />
  </SettingPagePane>
);
```

In this example, **SettingPagePane** creates a pane with an ID of `settings-general` and a title generated by converting `"general"` to camel case and resolving the corresponding internationalized message. If no message is found, it defaults to using `"general"`.

## Props

| Name         | Type                     | Description                                                                                                                                                   | Default      | Required |
|--------------|--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------|----------|
| `sectionName`| `string`                 | The unique name of the settings section. This prop is used to generate the pane’s identifier and to lookup the internationalized title for the pane header. | `undefined`  | ✓        |
| `intlKey`    | `string`                 | A base internationalization key used by the `useKintIntl` hook to find the correct localized message for the pane title.                                       | `undefined`  | ✕        |
| `intlNS`     | `string`                 | An internationalization namespace for resolving labels within the pane title.                                                                                 | `undefined`  | ✕        |
| `children`   | `node` or `func`         | The content to be rendered within the pane. Typically, this is a **SettingsPage** component, but it can be any valid React node.                                | `undefined`  | ✕        |