import CustomPropTypes from "../../../utils/prop-types/index.js";
import PropTypes from 'prop-types';
import getColor from "../../../utils/colors/getColor.js";
import useResponsiveValues from "../../../hooks/breakpoint/useResponsiveValues/index.js";
import getMarginClasses from "../../../utils/css/getMarginClasses.js";
import cx from "../../../utils/css/cx.js";
import classes from './styles.module.scss';

/**
 * Renders a horizontal dividing block element that can separate elements.
 * Useful for when you don't want to use a whole AutoLayout to make a gap.
 *
 * ```js
 *
 * import { Divider } from '@politico/interactive-style';
 * ```
 */
const Divider = function Divider(props) {
  const {
    color,
    margin
  } = props;
  const marginValue = useResponsiveValues(margin);
  const margins = getMarginClasses(marginValue);
  return <hr className={cx.merge(classes)('divider', {
    border: !!color
  }, margins)} style={{
    '--Divider-color': getColor(color)
  }} />;
};
Divider.displayName = 'Divider';
Divider.defaultProps = {
  margin: undefined,
  color: 'transparent'
};
Divider.propTypes = {
  /**
   * The margin around the divider. Margins can be specified as one spacing
   * value that gets used on all sides, separate `x` and `y` values, or
   * completely separate `trbl` values. The values correspond to levels of our
   * spacing scale (e.g., `"4"` corresponds to `$spacing-4`).
   */
  margin: CustomPropTypes.responsive(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    x: PropTypes.string,
    y: PropTypes.string
  }), PropTypes.shape({
    t: PropTypes.string,
    r: PropTypes.string,
    b: PropTypes.string,
    l: PropTypes.string
  })])),
  /**
   * Sets the color of the line, which will be inherited by default.
   * This prop accepts either a color name provided by this library or a CSS
   * color value.
   */
  color: PropTypes.string
};
export default Divider;