import "./divider.css";

export type DividerBorderStyle = "solid" | "dotted";
export type DividerDirection = "horizontal";

export type CatalogDividerBorderStyle = DividerBorderStyle;
export type CatalogDividerDirection = DividerDirection;

export type CatalogDividerProps = {
  borderStyle?: DividerBorderStyle;
  direction?: DividerDirection;
};

export type CatalogContentDividerProps = {
  actionLabel?: string;
  borderStyle?: DividerBorderStyle;
  dir?: "ltr" | "rtl" | "auto";
  disabled?: boolean;
  label?: string;
  onAction?: () => void;
};

export function CatalogDivider({ borderStyle = "solid" }: CatalogDividerProps) {
  return <hr className={`ds-divider ds-divider--${borderStyle}`} />;
}

export function CatalogContentDivider({
  actionLabel,
  borderStyle = "solid",
  dir = "ltr",
  disabled = false,
  label,
  onAction,
}: CatalogContentDividerProps) {
  return (
    <div className={`ds-content-divider ds-content-divider--${borderStyle}`} dir={dir}>
      <span aria-hidden="true" className="ds-content-divider__rule" />
      {actionLabel && onAction ? (
        <button className="ds-content-divider__button" disabled={disabled} onClick={onAction} type="button">
          {actionLabel}
        </button>
      ) : label ? (
        <span className="ds-content-divider__label">{label}</span>
      ) : null}
      <span aria-hidden="true" className="ds-content-divider__rule" />
    </div>
  );
}
