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

const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
  const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
  const baseDir = pathToRoot(fileData.slug!)
  return (
    <h2 class={classNames(displayClass, "page-title")}>
      <a href={baseDir}>
        <svg class="page-logo" viewBox="0 0 350 295" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_1_12)">
            <path d="M350 262.5C301.675 262.5 262.5 223.325 262.5 175" stroke="currentColor" stroke-width="65.625"/>
            <path d="M262.5 175C262.5 223.325 223.325 262.5 175 262.5" stroke="currentColor" stroke-width="65.625"/>
            <path d="M175 262.5C126.675 262.5 87.5 223.325 87.5 175" stroke="currentColor" stroke-width="65.625"/>
            <path d="M87.5 175C87.5 223.325 48.3249 262.5 0 262.5" stroke="currentColor" stroke-width="65.625"/>
            <path d="M87.5 175L87.5 0" stroke="currentColor" stroke-width="65.625"/>
            <path d="M262.5 175L262.5 0" stroke="currentColor" stroke-width="65.625"/>
            <path d="M0 120.312H350" stroke="currentColor" stroke-width="65.625"/>
          </g>
          <defs>
            <clipPath id="clip0_1_12">
              <rect width="350" height="295" fill="transparent"/>
            </clipPath>
          </defs>
        </svg>
        {title}
      </a>
    </h2>
  )
}

PageTitle.css = `
.page-title {
  font-weight: 900;
  font-size: 1.5rem;
  margin: 0;
  font-family: var(--titleFont);
}
.page-title a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.page-logo {
  height: 16px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.page-header .page-title {
  font-weight: 900;
  display: block !important;
}
`

export default (() => PageTitle) satisfies QuartzComponentConstructor