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

type StyledHeadingProps = {
  themeSize: 'small' | 'medium';
};

const StyledHeading = styled(View)<StyledHeadingProps>(
  ({ theme, themeSize }) => ({
    paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
    paddingHorizontal:
      theme.__hd__.sectionHeading.space.headingHorizontalPadding,
    backgroundColor:
      themeSize === 'medium'
        ? theme.__hd__.sectionHeading.colors.background
        : theme.__hd__.sectionHeading.colors.backgroundSmall,
    marginBottom: theme.__hd__.sectionHeading.space.headingMarginBottom,
    display: 'flex',
    flexDirection: 'row',
    alignContent: 'center',
    justifyContent: 'space-between',
  })
);

const StyledIconWrapper = styled(View)(({ theme }) => ({
  marginRight: theme.__hd__.sectionHeading.space.iconMarginRight,
}));

const StyledWrapper = styled(View)(() => ({
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
}));

export { StyledHeading, StyledIconWrapper, StyledWrapper };