import type { SettingsItemProps } from '@my/ui'
import { Settings, styled, View, ListItem } from '@my/ui'

export interface SettingsAlertProps {
  title: string
  message: string
}

export const GroupContainer = styled(View, {
  marginTop: '$2',
  marginBottom: '$2',
})

const GroupTitle = styled(ListItem.Subtitle, {
  marginHorizontal: '$4',
})

export const SettingsGroup = (props: SettingsItemProps<'group'>) => {
  const { label, options, disabled } = props
  const { children } = options

  return (
    <>
      <GroupContainer>
        <GroupTitle>{label}</GroupTitle>
        <Settings items={children?.map((item) => ({ ...item, disabled: disabled }))} />
      </GroupContainer>
    </>
  )
}
