import styled from 'styled-components';
import { borderColor, borderWidth, BorderWidthProps } from 'styled-system';
import { IconCircled } from '../IconCircled';
import { ComponentWithoutProps } from '../utils';

type IconProps = React.ComponentProps<typeof IconCircled>;

export type Props = IconProps & BorderWidthProps;

export const IconOutlined = styled(IconCircled).attrs({
  bg: 'transparent',
})`
  border-style: solid;
  border-width: ${({ borderWidth }) => borderWidth};
  ${({ color, theme }) => borderColor({ borderColor: color, theme })};
`;

IconOutlined.defaultProps = {
  borderWidth: '2px',
};
