---
import { SITE } from '../data/site'

interface Props {
  title: string
  description: string
  ogImage?: string
  type?: 'website' | 'article'
  jsonLd?: object[]
}

const { title, description, ogImage = SITE.ogDefault, type = 'website', jsonLd = [] } = Astro.props

const canonical = new URL(Astro.url.pathname, SITE.url).href
const ogImageAbs = new URL(ogImage, SITE.url).href
---

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonical} />
<link rel="icon" type="image/svg+xml" href="/openclaude-logo.svg" />
<link rel="icon" type="image/png" href="/openclaude.png" />
<link rel="sitemap" href="/sitemap-index.xml" />
<meta name="theme-color" content="#000000" />
<meta name="color-scheme" content="dark light" />

<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content={type} />
<meta property="og:url" content={canonical} />
<meta property="og:site_name" content={SITE.name} />
<meta property="og:image" content={ogImageAbs} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content={`${SITE.name} — open-source coding agent CLI`} />

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

{jsonLd.map(block => (
  <script is:inline type="application/ld+json" set:html={JSON.stringify(block)} />
))}
