import React from "react";
import { getActiveClasses } from "../utility/active-classes";

interface Props {
  as?: any;
  className?: string;
  children?: React.ReactNode;
}

export default function HeadingUnderline({
  as: Tag = "h2",
  className,
  children
}: Props) {
  return (
    <Tag
      className={getActiveClasses({
        [className]: true,
        "auik-text-xl auik-leading-none auik-font-medium": true
      })}
    >
      {children}
      <div className="auik-h-1 auik-bg-blue-500 auik-w-10 auik-mt-2"></div>
    </Tag>
  );
}
