import * as React from "react";
import Head from "next/head";

export interface SEOProps {
  title?: string;
  description?: string;
  og?: {
    title?: string;
    description?: string;
    image?: string;
  };
}

export default function SEO(props: SEOProps) {
  const { title, description, og } = props;

  const generateTitle = () => {
    if (title) {
      return `${title} | TiDB Playground`;
    }
    return "TiDB Playground - Interactive Experience with TiDB Capabilities";
  };
  const defaultDesc =
    "An interactive playground for experiencing the full capabilities of distributed SQL database TiDB, without registration or install.";

  return (
    <Head>
      <title>{generateTitle()}</title>
      <meta
        name="description"
        content={description || defaultDesc}
        key="desc"
      />
      <meta
        name="keywords"
        content="TiDB, Playground, distributed SQL database, mysql alternative, HTAP"
      />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="icon" href="/favicon.ico" />

      {/* opengraph-image */}
      <meta property="og:title" content={og?.title || generateTitle()} />
      <meta
        property="og:description"
        content={og?.description || defaultDesc}
      />
      <meta property="og:image" content={og?.image || `/img/og_image.jpg`} />
      <meta property="og:image:alt" content="About TiDB Playground" />

      {/* twitter-image */}
      <meta property="twitter:title" content={og?.title || generateTitle()} />
      <meta
        property="twitter:description"
        content={og?.description || defaultDesc}
      />
      <meta
        property="twitter:image"
        content={og?.image || `/img/og_image.jpg`}
      />
      <meta property="twitter:image:alt" content="About TiDB Playground" />
      <meta name="twitter:card" content="summary_large_image" />
      {/* <meta property="twitter:domain" content="play.tidbcloud.com" />
      <meta property="twitter:url" content="https://play.tidbcloud.com" /> */}
    </Head>
  );
}
