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

export type TitleElementType = HTMLDivElement;

export interface TitleProps extends DOMProps, RefAttributes<TitleElementType> {
  children?: ReactNode;
  /** Custom class name for setting specific CSS */
  className?: string;
  elementType?: React.ElementType;
  title: string;
  description: string;
}

const Title = ({ ref, ...props }: TitleProps) => {
  const {
    elementType: Element = "div",
    title,
    description,
    ...otherProps
  } = props;

  const classes = classNames("mobius", "mobius-title", otherProps.className);
  const headerClasses = classNames("mobius", "mobius-title__header");
  const contentClasses = classNames("mobius", "mobius-title__description");
  const containerClasses = classNames("mobius", "mobius-title__container");

  return (
    <Element ref={ref} {...otherProps} className={classes}>
      <Flex flexDirection="column" className={containerClasses}>
        <p className={headerClasses}>{title}</p>
        <p className={contentClasses}>{description}</p>
      </Flex>
    </Element>
  );
};

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