import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { StyledDivider } from './styled-component';
import { useTheme } from '../Theme';
import { DividerProps } from './types.d';

export const Divider: FunctionComponent<DividerProps> = ({
  className = '',
  orientation = 'horizontal',
  size = 'medium',
  style,
}): React.ReactElement => {
  const theme = useTheme();
  const classNames = cn({
    square_divider: true,
    vertical: orientation === 'vertical',
    small: size === 'small',
    medium: size === 'medium',
    big: size === 'big',
    [className]: className,
  });

  return <StyledDivider className={classNames} $theme={theme} $color="secondary" style={style} />;
};
