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

type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

const StyledDivider = styled(View)<{
  themeMarginHorizontal?: MarginSize;
  themeMarginVertical?: MarginSize;
}>(({ themeMarginHorizontal, themeMarginVertical, theme }) => {
  const horizontalMargin =
    themeMarginHorizontal !== undefined
      ? { marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal] }
      : {};
  const verticalMargin =
    themeMarginVertical !== undefined
      ? { marginVertical: theme.__hd__.divider.space[themeMarginVertical] }
      : {};

  return {
    maxWidth: '100%',
    borderBottomColor: theme.__hd__.divider.colors.default,
    borderBottomWidth: theme.__hd__.divider.borderWidths.default,
    ...horizontalMargin,
    ...verticalMargin,
  };
});

export { StyledDivider };