import React from 'react';
import { black, Flex, WrapperProps } from 'dot-design-system';

interface Props extends WrapperProps {
	elevated?: boolean;
}

function CircleIcon({ elevated = false, css: cssProp, ...props }: Props) {
	return (
		<Flex
			alignItems={'center'}
			justifyContent={'center'}
			height={35}
			width={35}
			borderRadius={'50%'}
			background={black}
			color={'#fff'}
			css={`
				box-shadow: ${elevated &&
				'0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'};
				${cssProp};
			`}
			{...props}
		/>
	);
}

export default CircleIcon;