import Head from 'next/head';
import twitterImage from "../public/indispareLogo144px.png"
import ogImage from "../public/indispareLogo200px.png"
import { baseUrl } from '../constants/urls';

interface SEOHeadProps {
  title: string;
  description: string;
  url: string;
  image: string;
}

const makeAbsoluteURL = (relativeURL:any) => {
  return `${baseUrl}${relativeURL}`;
};


const SEOHead: React.FC<SEOHeadProps> = ({ title, description, url, image }) => (
  <Head>
    <link rel="canonical" href={url} />
    <meta charSet="utf-8" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <meta name="robots" content="index, follow" />
    <meta property="og:title" content={title} />
    <meta property="og:site_name" content="indispare.com" />
    <meta property="og:url" content={url} />
    <meta property="og:description" content={description} />
    <meta property="og:type" content="website" />
    <meta property="og:image" content={makeAbsoluteURL(ogImage.src)} />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="www.indispare.com" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={makeAbsoluteURL(twitterImage.src)} />
  </Head>
);

export default SEOHead;
