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

export type LabelElementType = HTMLLabelElement;
export type IntrinsicLabel = Omit<
  React.JSX.IntrinsicElements["label"],
  "css" | "color" | "ref"
>;

export interface LabelProps
  extends IntrinsicLabel, DOMProps, RefAttributes<LabelElementType> {
  children?: ReactNode;
  className?: string;
  elementType?: "label" | "span";
}

const Label = ({ ref, ...props }: LabelProps) => {
  const { elementType: Element = "label", children, ...otherProps } = props;

  const classes = classNames("mobius", "mobius-label", props.className);
  otherProps.className = classes;

  return (
    <Element ref={ref} {...otherProps} className={classes}>
      {children}
    </Element>
  );
};

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