import Head from "next/head";

import {
  SITE_DESCRIPTION,
  SITE_TITLE,
  SITE_URL,
  TWITTER_USERNAME,
} from "@/config/constants";
import { buildStaticAssetPath } from "@/helpers/file";

const DEFAULT_SEO_IMAGE = buildStaticAssetPath("og-image", "img");

const songImageSize = { width: 256, height: 256 };
const defaultImageSize = { width: 1200, height: 630 };

interface SeoMetaProps {
  title?: string;
  description?: string;
  img?: string;
  url?: string;
}

const SeoMeta = ({
  title: pageTitle,
  img: pageImg,
  description: pageDescription,
  url: pageUrl,
}: SeoMetaProps) => {
  const title = pageTitle ? pageTitle : SITE_TITLE;
  const description = pageDescription ? pageDescription : SITE_DESCRIPTION;
  const img = pageImg ? pageImg : DEFAULT_SEO_IMAGE;
  const imgSize = pageImg ? songImageSize : defaultImageSize;
  const url = pageUrl ? pageUrl : SITE_URL;

  return (
    <Head>
      <title>{title}</title>
      <meta name="title" content={title} key="title" />
      <meta name="description" content={description} key="description" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />

      <meta property="og:type" content="website" key="og_type" />
      <meta property="og:title" content={title} key="og_title" />
      <meta
        property="og:description"
        content={description}
        key="og:description"
      />
      <meta property="og:url" content={url} key="og_url" />
      <meta property="og:image" content={img} key="og_image" />
      <meta itemProp="image" content={img} />
      <meta name="thumbnail" content={img} />
      <meta property="og:image:alt" content={title} key="og_image_alt" />
      <meta
        property="og:image:width"
        content={`${imgSize.width}`}
        key="og_image_width"
      />
      <meta
        property="og:image:height"
        content={`${imgSize.height}`}
        key="og_image_height"
      />
      <meta property="og:locale" content="en_US" key="og_locale" />

      <meta name="twitter:card" content="summary" key="twitter_card" />
      <meta
        property="twitter:site"
        content={`@${TWITTER_USERNAME}`}
        key="twitter:site"
      />
      <meta name="twitter:title" content={title} key="twitter_title" />
      <meta
        name="twitter:description"
        content={description}
        key="twitter:description"
      />
      <meta name="twitter:image" content={img} key="twitter_image" />

      <link
        rel="apple-touch-icon"
        sizes="180x180"
        href="/apple-touch-icon.png"
      />
      <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href="/favicon-32x32.png"
      />
      <link
        rel="icon"
        type="image/png"
        sizes="16x16"
        href="/favicon-16x16.png"
      />

      <meta name="robots" content="index,follow" />
    </Head>
  );
};

export default SeoMeta;
