import type { ReactNode, RefAttributes } from "react";
import classNames from "classnames/dedupe";
import type { DOMProps } from "../../types/dom";
import "./Segment.css";

export type SegmentElementType = HTMLDivElement;

export interface SegmentProps
  extends DOMProps, RefAttributes<SegmentElementType> {
  className?: string;
  heading?: string;
  /** Background colour for Segment */
  colour?: "subtle" | "primary" | "secondary";
  /** When inverted, text is white.  Use on darker backgrounds. */
  inverted?: boolean;
  children?: ReactNode;
}

const Segment = ({ ref, ...props }: SegmentProps) => {
  const { heading, children, colour, inverted, className, ...rest } = props;

  const classes = classNames(
    "mobius",
    "mobius-segment",
    colour,
    { inverted },
    className,
  );

  return (
    <div ref={ref} className={classes} {...rest}>
      {heading && <div className="mobius-segment__heading">{heading}</div>}
      {children}
    </div>
  );
};

Segment.displayName = "Segment";
export { Segment };
