import styled from 'styled-components';

export const StatusCode = styled.button.attrs({ 'data-component-name': 'StatusCode/StatusCode' })<{
  status: string;
}>`
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
    
  &:before {
    display: inline-block;
    content: '';
    border-radius: 50%;
    margin-right: 4px;
    height: var(--status-code-height);
    width: var(--status-code-width);
    border: var(--status-code-border);
    background-color: ${({ status }) => {
      switch (true) {
        case status.startsWith('2'):
          return 'var(--status-code-200-bg-color)';
        case status.startsWith('3'):
          return 'var(--status-code-300-bg-color)';
        case status.startsWith('4'):
          return 'var(--status-code-400-bg-color)';
        case status.startsWith('5'):
          return 'var(--status-code-500-bg-color)';
        default:
          return 'var(--status-code-100-bg-color)';
      }
    }}
`;