import { SectionList, View } from 'react-native';
import styled from '@emotion/native';

const SectionSpacer = styled(View)(({ theme }) => ({
  marginTop: theme.__hd__.select.space.sectionSpacing,
}));

const OptionSpacer = styled(View)(({ theme }) => ({
  marginTop: theme.__hd__.select.space.optionSpacing,
}));

const StyledSearchBar = styled(View)(({ theme }) => ({
  marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
  paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
  paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing,
}));

const StyledSectionList = styled(SectionList)(({ theme }) => ({
  paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding,
})) as unknown as typeof SectionList;

export { SectionSpacer, OptionSpacer, StyledSearchBar, StyledSectionList };