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

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

// local files
import { useStyles } from './styles';

export interface HeaderProps {
  img?: string | ReactNode;
  label: string | ReactNode;
}

export const Header: FC<HeaderProps> = ({ img, label }) => {
    const { block, typography, imgWrapper } = useStyles()

    return (
        <div className={block}>
            <Typography variant="h4" className={typography}>{label}</Typography>
            {img ? typeof img === 'string' ? <img src={img} className={imgWrapper}/> : {img} : <div className={imgWrapper}>{typeof label === 'string' ? label[0] : ''}</div>}
        </div>
    )
};
