import Head from 'next/head'
import parse from 'html-react-parser'
import { transformHeadlessURLs } from '@/lib/utilities'

type Props = {
  seo?: {
    fullHead?: string
  }
}

export default function Meta({ seo }: Props) {
  const title = 'Corporate Image'
  const description = 'Fallback meta description'

  return (
    <Head>
      <meta name="google-site-verification" content="wqWRDxntoCxUkVUQ8yQDaVl91YoWKX8tVhJnjrOgF6w" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />

      <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
      <link rel="icon" type="image/png" sizes="32x32" href="/icons/favion-32x32.png" />
      <link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png" />
      <link rel="icon" type="image/png" sizes="192x192" href="/icons/android-icon-192x192.png" />
      <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png" />
      <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png" />
      <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png" />
      <link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png" />
      <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png" />
      <link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png" />
      <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png" />
      <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png" />
      {/* <link rel="manifest" href="/favicon/site.webmanifest" /> */}
      {/* <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#000000" /> */}
      <link rel="shortcut icon" href="/favicon.ico" />
      <meta name="msapplication-TileColor" content="#ffffff" />
      <meta name="msapplication-TileImage" content="/icons/ms-icon-144x144.png" />
      {/* <meta name="msapplication-config" content="/favicon/browserconfig.xml" /> */}
      {/* <meta name="theme-color" content="#000" /> */}
      {/* <link rel="alternate" type="application/rss+xml" href="/feed.xml" /> */}

      {/* <title>{`${title ? `${title} | ` : ''}Corporate Image`}</title> */}
      <title>{title}</title>
      <meta name="description" content={description} />
      {/* <meta property="og:image" content={image || 'fallback-image.jpg'} /> */}
      {/* <meta property="og:title" content={title} /> */}
      {/* <meta property="og:url" content={} /> */}
      {/* <meta property="og:description" content={description} /> */}

      {/* TODO? */}
      <link rel="preconnect" href={`${process.env.NEXT_PUBLIC_WORDPRESS_URL}`} />
      <link rel="dns-prefetch" href={`${process.env.NEXT_PUBLIC_WORDPRESS_URL}`} />

      {parse(transformHeadlessURLs(seo?.fullHead ?? ''))}
    </Head>
  )
}
