import React from 'react';
import { MdAdd } from 'react-icons/md';
import { fontSizes } from '../styles/typography';
import { black, Flex, secondary, Wrapper, WrapperProps } from 'dot-design-system';
import CircleIcon from './CircleIcon';

interface Props extends WrapperProps {}

function CircleIconButton({ children, ...props }: Props) {
	return (
		<Flex
			alignItems={'center'}
			component={'button'}
			fontSize={fontSizes.theta}
			color={black}
			css={`
				border: none;
				cursor: pointer;
				outline: none;
				text-decoration: none;
			`}
			{...props}
		>
			<CircleIcon
				width={45}
				height={45}
				mr={10}
				background={secondary}
				elevated
				css={`
					min-width: 45px;
				`}
			>
				<MdAdd />
			</CircleIcon>
			<Wrapper component={'span'}>{children}</Wrapper>
		</Flex>
	);
}

export default CircleIconButton;