// node modules
import React, {
    FC,
} from 'react';

// local components
import { Typography } from "../typography";

// local files
import successIcon from '../../assets/check_icon_green.svg';
import errorIcon from '../../assets/error_icon.svg';
import {useStyles} from "./styles";

export interface InfoBlockProps {
    variant: 'error' | 'success';
    text: string;
}

export const InfoBlock: FC<InfoBlockProps> = ({
    variant,
    text,
}) => {
    const {block, typography} = useStyles({variant: variant === 'error'})

    return (
        <div className={block}>
            <img src={variant === 'error' ? errorIcon : successIcon} alt="icon"/>
            <Typography variant="h4" className={typography}>
                {text}
            </Typography>
        </div>
    )
}