import styled, { css } from 'styled-components';

const StyledDivider = styled.div<{
  themeMarginX?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
  themeMarginY?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
  themeVariant: 'horizontal' | 'vertical';
}>`
  margin: 0;
  padding: 0;

  ${({ themeVariant, theme }) => {
    switch (themeVariant) {
      case 'vertical':
        return css`
          border-left-width: ${theme.borderWidths.divider.default};
          border-left-color: ${theme.colors.divider.default};
          border-left-style: solid;
        `;
      case 'horizontal':
        return css`
          border-bottom-width: ${theme.borderWidths.divider.default};
          border-bottom-color: ${theme.colors.divider.default};
          border-bottom-style: solid;
        `;
    }
  }};

  ${({ themeMarginY, theme }) => {
    switch (themeMarginY) {
      case undefined:
        return css``;
      case 'xsmall':
        return css`
          margin: ${theme.space.divider.xsmallMarginY};
        `;
      case 'small':
        return css`
          margin: ${theme.space.divider.smallMarginY};
        `;
      case 'medium':
        return css`
          margin: ${theme.space.divider.mediumMarginY};
        `;
      case 'large':
        return css`
          margin: ${theme.space.divider.largeMarginY};
        `;
      case 'xlarge':
        return css`
          margin: ${theme.space.divider.xlargeMarginY};
        `;
    }
  }};
  ${({ themeMarginX, theme }) => {
    switch (themeMarginX) {
      case undefined:
        return css``;
      case 'xsmall':
        return css`
          margin: ${theme.space.divider.xsmallMarginX};
        `;
      case 'small':
        return css`
          margin: ${theme.space.divider.smallMarginX};
        `;
      case 'medium':
        return css`
          margin: ${theme.space.divider.mediumMarginX};
        `;
      case 'large':
        return css`
          margin: ${theme.space.divider.largeMarginX};
        `;
      case 'xlarge':
        return css`
          margin: ${theme.space.divider.xlargeMarginX};
        `;
    }
  }};
`;

export default StyledDivider;