import React, { HTMLProps } from "react";
import classnames from "classnames";
import { Text } from "../Text";
import { bem } from "../../utilities/bem";

const cn = "Heading";

type HeadingProps = HTMLProps<HTMLHeadingElement>;

export const Heading = (props: HeadingProps) => {
  const { children, className, ...rest } = props;
  const classes = classnames(bem(cn), className);

  return (
    <Text className={classes} {...rest}>
      {children}
    </Text>
  );
};

const H1 = (props: HeadingProps) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h1"
      className={classnames(bem(cn, { m: "h1" }), className)}
      {...rest}
    />
  );
};
const H2 = (props: HeadingProps) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h2"
      className={classnames(bem(cn, { m: "h2" }), className)}
      {...rest}
    />
  );
};
const H3 = (props: HeadingProps) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h3"
      className={classnames(bem(cn, { m: "h3" }), className)}
      {...rest}
    />
  );
};
const H4 = (props: HeadingProps) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h4"
      className={classnames(bem(cn, { m: "h4" }), className)}
      {...rest}
    />
  );
};
const H5 = (props: HeadingProps) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h5"
      className={classnames(bem(cn, { m: "h5" }), className)}
      {...rest}
    />
  );
};
const H6 = (props: HeadingProps) => {
  const { className, ...rest } = props;
  return (
    <Heading
      as="h6"
      className={classnames(bem(cn, { m: "h6" }), className)}
      {...rest}
    />
  );
};

Heading.H1 = H1;
Heading.H2 = H2;
Heading.H3 = H3;
Heading.H4 = H4;
Heading.H5 = H5;
Heading.H6 = H6;