import cx from "classnames";
import type { HTMLAttributes, ReactNode } from "react";
import React from "react";

import { Icon } from "../Icon";

export interface DividerProps
  extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
  /** Custom content inside divider */
  content?: ReactNode;
  /** Icon which will be rendered inside divider */
  icon?: string;
}

const CLASS_ROOT = "divider";

const Divider: React.FC<DividerProps> = ({
  className,
  icon,
  content,
  ...other
}) => {
  const classes = cx(CLASS_ROOT, className);
  const lineClass = `${CLASS_ROOT}__line`;
  const contentClass = `${CLASS_ROOT}__content`;

  return (
    <div className={classes} {...other}>
      <div className={lineClass} />
      {(content || icon) && (
        <>
          <div className={contentClass}>
            {content ?? (icon && <Icon name={icon} size="medium" />)}
          </div>
          <div className={lineClass} />
        </>
      )}
    </div>
  );
};

Divider.displayName = "Divider";

export { Divider };