import { Fieldset, Text, Divider } from "@geist-ui/core"
import styles from "./settings-group.module.css"

type Props = {
	title: string
	children: React.ReactNode | React.ReactNode[]
}

const SettingsGroup = ({ title, children }: Props) => {
	return (
		<Fieldset>
			<Fieldset.Content>
				<Text h4>{title}</Text>
			</Fieldset.Content>
			<Divider />
			<Fieldset.Content className={styles.content}>{children}</Fieldset.Content>
		</Fieldset>
	)
}

export default SettingsGroup