import React, { FC, memo }         from 'react';
import { cn }                      from '../../util/bem';
import { SizeType, TextColorType } from '../../util/global-props';
import './description.component.scss';

export type DescriptionPropsType = {
    className?: string;
    children: React.ReactNode;
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'lx';
    lineHeight?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    align?: 'left' | 'center' | 'right';
    color?: TextColorType;
    weight?: 'bold' | 'normal' | 'medium' | 'regular' | 'semi-bold';
    margin?: SizeType;
    uppercase?: boolean;
    flex?: number | string;
    noWrap?: boolean;
    style?: React.CSSProperties;
    onClick?: React.EventHandler<React.MouseEvent<HTMLDivElement, PointerEvent>>;
}

const className = cn('description');

export const Description: FC<DescriptionPropsType> = memo((props) => (
    <div
        className={ className({
            size:       props.size,
            align:      props.align,
            weight:     props.weight,
            color:      props.color,
            uppercase:  props.uppercase,
            margin:     props.margin,
            noWrap:     props.noWrap,
            flex:       props.flex,
            lineHeight: props.lineHeight
        }, null, props.className) }
        style={ {
            cursor: props.onClick && 'pointer',
            ...props.style
        } }
        onClick={ props.onClick }
    >
        { props.children }
    </div>
));