import styled from '@emotion/styled';

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--GreyDark, rgba(74, 85, 101, 1));
  font-weight: 500;
`;

const IconSlot = styled.span`
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
`;

export const IconWithContent = ({ icon, children }) => (
  <Wrapper>
    {icon && <IconSlot>{icon}</IconSlot>}
    <span>{children}</span>
  </Wrapper>
);