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

export interface SEOProps {
  title?: string;
}

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

  const generateTitle = () => {
    if (title) {
      return `${title} | TiDB Playground - Interactive Experience with TiDB Capabilities`;
    }
    return "TiDB Playground - Interactive Experience with TiDB Capabilities";
  };

  return (
    <Head>
      <title>{generateTitle()}</title>
      <meta
        name="description"
        content="TiDB Playground is an interactive platform for experiencing the full capabilities of distributed SQL database TiDB, without the need to register or install."
      />
      <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" />
    </Head>
  );
}
