import { Typography } from "@material-tailwind/react";
import { useMemo } from "react";

export type PageHeaderProps = {
  name: string;
  size?: "title" | "subtitle";
  className?: string;
};

export default function PageHeader({
  name,
  size = "subtitle",
  className,
}: PageHeaderProps) {
  const renderTitle = useMemo(() => {
    if (size == "title")
      return (
        <>
          <Typography
            variant="h5"
            className={`text-base font-medium text-black-500 mb-3 ${className}`}
          >
            {name}
          </Typography>
        </>
      );

    if (size == "subtitle")
      return (
        <>
          <Typography
            variant="h6"
            className={`text-sm font-medium text-black-500 mb-3 ${className}`}
          >
            {name}
          </Typography>
        </>
      );
  }, [size, name, className]);

  return <>{renderTitle}</>;
}
