import React, { ReactNode } from 'react'
import styled from 'styled-components'

export type CircleProps = {
 css?: string;
 children?: ReactNode;
 onClick?: (event:React.MouseEvent<HTMLElement>) => void
};

export const Circle = ({ children,css,onClick }: CircleProps):JSX.Element => {
  return (
    <StyledCircle onClick={onClick} css={css}>
      {children}
    </StyledCircle>
  )
}

const StyledCircle = styled.div<{css?:string}>`
  width: 28px;
  height: 28px;
  text-align:center;
  border-radius: 50px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  :only-child {
   font-family: 'Inter',sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 1.5rem;
   line-height: 36px;
   color: #000000;
  }

  ${(p) => p.css}
`