import cn from "../../lib/helpers/classnames";
import Link from "../Link";
import type { ComponentPropsWithoutRef } from "react";

export type PageTitleProps = ComponentPropsWithoutRef<"h1"> & {
  canonical: string;
};

const PageTitle = ({ canonical, className, children, ...rest }: PageTitleProps) => {
  return (
    <h1 className={cn("mt-1 mb-6 text-left text-3xl font-medium lowercase", className)} {...rest}>
      <Link
        href={canonical}
        className="before:mr-[-0.1em] before:tracking-widest before:text-gray-500 before:content-['\002E\002F'] hover:no-underline"
      >
        {children}
      </Link>
    </h1>
  );
};

export default PageTitle;