import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { classNames } from "../util/lang"

const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {

    // Hide on specific pages
    if (
      fileData.slug === "index" || 
      fileData.slug === "link"
    ) {
      return <></>;
    }

  const title = fileData.frontmatter?.title
  if (title) {
    return <p class={classNames(displayClass, "article-title")} style="opacity: 0.3">{title}</p>
  } else {
    return null
  }
}

ArticleTitle.css = `
.article-title {
  margin: 2rem 0 0 0;
}
`

export default (() => ArticleTitle) satisfies QuartzComponentConstructor