import { CSSProperties, FC, useMemo } from 'react';
import { Base, BaseProps } from './Base';
import { ColorVariantType } from './types';

export interface HorizontalRuleProps extends BaseProps<HTMLDivElement>
{
    variant?: ColorVariantType;
    height?: number;
}

export const HorizontalRule: FC<HorizontalRuleProps> = props =>
{
    const { variant = 'black', height = 1, classNames = [], style = {}, ...rest } = props;

    const getClassNames = useMemo(() =>
    {
        const newClassNames: string[] = [];

        if(variant) newClassNames.push('bg-' + variant);

        if(classNames.length) newClassNames.push(...classNames);

        return newClassNames;
    }, [ variant, classNames ]);

    const getStyle = useMemo(() =>
    {
        let newStyle: CSSProperties = { display: 'list-item' };

        if(height > 0) newStyle.height = height;

        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };

        return newStyle;
    }, [ height, style ]);

    return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />;
};