import { getClassNames } from '@websolutespa/bom-core';
import styled from 'styled-components';
import { UIComponent, UIStyledComponentProps } from '../../components/types';
import { getCssResponsive } from '../../components/utils';
import { getVariant, useVariants } from '../../variants';
import { IDividerVariants, dividerVariants } from './divider.variants';

type Props = {
  variant?: keyof typeof dividerVariants | (string & {});
  variants?: IDividerVariants;
};

export type DividerProps = UIStyledComponentProps<Props>;

export type DividerComponent<C extends React.ElementType = 'div'> = UIComponent<C, Props>;

const DividerContainer = styled.div<DividerProps>`
  ${props => getVariant(props.variant, props.variants)}
  ${props => getCssResponsive(props, { padding: props.children ? '1rem 0' : '0.5rem 0' })}
`;

export const Divider: DividerComponent = ({
  className,
  children,
  as = 'div' as React.ElementType,
  variant = 'default',
  variants,
  ...props
}) => {
  const classNames = getClassNames('divider', className, variant);
  const globalVariants = useVariants('divider', dividerVariants);
  variants = variants || globalVariants;
  return (
    <DividerContainer as={as} className={classNames} variant={variant} variants={variants} {...props}>
      {children && <span className="title">{children}</span>}
    </DividerContainer>
  );
};