import React from 'react';
import { Helmet } from 'react-helmet-async';
import { useLocale } from '@/app/providers/LocaleProvider';
import { OG_IMAGE } from '@/shared/constants/branding';

const absoluteAssetUrl = (path: string): string =>
  new URL(path, window.location.origin).href;

export const DocumentHead: React.FC = () => {
  const { t } = useLocale();
  const pageTitle = t('common:app.pageTitle');
  const description = t('common:app.metaDescription');
  const ogImageAlt = t('common:app.ogImageAlt');
  const canonicalUrl = window.location.origin + window.location.pathname;
  const ogImage = absoluteAssetUrl(OG_IMAGE);

  return (
    <Helmet>
      <title>{pageTitle}</title>
      <meta name="description" content={description} />
      <link rel="canonical" href={canonicalUrl} />

      <meta property="og:title" content={pageTitle} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content="website" />
      <meta property="og:url" content={canonicalUrl} />
      <meta property="og:site_name" content={t('common:app.name')} />
      <meta property="og:image" content={ogImage} />
      <meta property="og:image:secure_url" content={ogImage} />
      <meta property="og:image:type" content="image/png" />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
      <meta property="og:image:alt" content={ogImageAlt} />

      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={pageTitle} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={ogImage} />
      <meta name="twitter:image:alt" content={ogImageAlt} />
    </Helmet>
  );
};