import React, { FC, PropsWithChildren } from 'react'
import styled from 'styled-components'

const StyledStepIcon = styled.div<{ $active?: boolean }>`
  background: ${props => props.$active ? '#FFAB83' : '#FFFFFF'};
  border: 1px solid ${props => props.$active ? '#FFAB83' : '#FF5200'};
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: 0;
  margin-bottom: 0;
  margin-inline-start: 0;
  margin-inline-end: 8px;
  font-size: 12px;
  color: #1E1D1F;
  font-weight: 400;
  text-align: center;
  border-radius: 50%;
  transition: background-color .3s, border-color .3s;
`

export const StepIcon: FC<PropsWithChildren<{ active: boolean }>> = ({ children, active }) => {
	return <StyledStepIcon $active={active}>{children}</StyledStepIcon>
}