import React from "react";

interface CustomHeadProps {
  title: string;
  description: string;
  url: string;
  images: { url: string; width?: number; height?: number; alt?: string }[];
}

export default function CustomHead({ title, description, url, images }: CustomHeadProps) {
  return (
    <>
      <title>{title}</title>
      <meta name="description" content={description} />

      {/* Favicon */}
      <link rel="apple-touch-icon" href="https://mymorni.ai/images/morni-og-logo.jpg" />

      {/* Open Graph */}
      <meta property="og:type" content="website" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:url" content={url} />
      {images.map((img, i) => (
        <React.Fragment key={i}>
          <meta property="og:image" content={img.url} />
          {img.width && <meta property="og:image:width" content={img.width.toString()} />}
          {img.height && <meta property="og:image:height" content={img.height.toString()} />}
          {img.alt && <meta property="og:image:alt" content={img.alt} />}
        </React.Fragment>
      ))}

      {/* iOS / Safari */}
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content="default" />
      <meta name="apple-mobile-web-app-title" content={title} />

      {/* Twitter */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      {images[0] && (
        <>
          <meta name="twitter:image" content={images[0].url} />
          {images[0].alt && <meta name="twitter:image:alt" content={images[0].alt} />}
        </>
      )}
    </>
  );
}