interface SEOProps {
  title: string
  description?: string
  image?: string
  url?: string
}

export function SEO({ title, description, image, url }: SEOProps) {
  const fullUrl = url && !url.startsWith('http')
    ? `${window.location.origin}${url}`
    : url

  const fullImage = image && !image.startsWith('http')
    ? `${window.location.origin}${image}`
    : image

  return (
    <>
      <title>{title}</title>
      {description && <meta name="description" content={description} />}
      <meta property="og:title" content={title} />
      {description && <meta property="og:description" content={description} />}
      {fullImage && <meta property="og:image" content={fullImage} />}
      {fullUrl && <meta property="og:url" content={fullUrl} />}
      <meta property="og:type" content="website" />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      {description && <meta name="twitter:description" content={description} />}
      {fullImage && <meta name="twitter:image" content={fullImage} />}
    </>
  )
}