---
import { SITE } from '@/consts'

interface Props {
  title?: string
  description?: string
  noindex?: boolean
  image?: string
}

const {
  title = SITE.title,
  description = SITE.description,
  noindex = false,
  image: imageProp,
} = Astro.props
const siteUrl = Astro.site ?? new URL(SITE.href)
const defaultImagePath = '/static/1200x630.png'
const ogImageUrl = new URL(imageProp ?? defaultImagePath, siteUrl).toString()
const ogImageWidth = imageProp ? undefined : 1200
const ogImageHeight = imageProp ? undefined : 630
const ogImageType = imageProp ? undefined : 'image/png'
const canonicalUrl = Astro.url
---

<title>{`${title} | ${SITE.title}`}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalUrl} />
{noindex && <meta name="robots" content="noindex, nofollow" />}

<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImageUrl} />
<meta property="og:image:alt" content={title} />
{
  ogImageWidth && (
    <meta property="og:image:width" content={String(ogImageWidth)} />
  )
}
{
  ogImageHeight && (
    <meta property="og:image:height" content={String(ogImageHeight)} />
  )
}
{ogImageType && <meta property="og:image:type" content={ogImageType} />}
<meta property="og:type" content="website" />
<meta property="og:locale" content={SITE.locale} />
<meta property="og:site_name" content={SITE.title} />
<meta property="og:url" content={canonicalUrl} />

<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImageUrl} />
<meta name="twitter:image:alt" content={title} />
<meta name="twitter:card" content="summary_large_image" />
