import { Typography, theme } from "antd";

const CardStepTitle: React.FC<{ handlerColor?: string; children?: React.ReactNode }> = ({ handlerColor, children }) => {
    const { token } = theme.useToken();
    return (
        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <div style={{
                width: 4,
                height: token.fontSizeHeading5,
                backgroundColor: handlerColor ?? token.colorPrimary,
                marginRight: token.marginXS,
                fontSize: token.sizeMD
            }} />
            <Typography.Title level={5} style={{ marginBottom: 0 }}>{children}</Typography.Title>
        </div>
    );
}

export default CardStepTitle;
