import { Helmet } from 'react-helmet-async';
import { useLocation } from 'react-router-dom';

interface SEOProps {
  title?: string;
  description?: string;
  keywords?: string[];
  image?: string;
  type?: string;
}

export function SEO({
                      title = 'Культура двух Столиц',
                      description = 'Последние новинки искусства, музыки, театра и культурных мероприятий Москвы и Санкт-Петербурга.',
                      keywords = ['культура', 'искусство', 'музыка', 'театр', 'кино'],
                      image = '/images/Logo-2.webp',
                      type = 'website',
                    }: SEOProps) {
  const location = useLocation();

  const baseUrl = 'https://xn--80aefrggdxongffce6aw8g.xn--p1ai';
  const cleanPath = location.pathname; // только путь без query и hash
  const canonicalUrl = `${baseUrl}${cleanPath}`;

  const siteTitle = title.includes('Культура двух Столиц')
      ? title
      : `${title} | Культура двух Столиц`;

  return (
      <Helmet>
        {/* Basic meta tags */}
        <title>{siteTitle}</title>
        <meta name="description" content={description} />
        <meta name="keywords" content={keywords.join(', ')} />

        {/* OpenGraph meta tags */}
        <meta property="og:title" content={siteTitle} />
        <meta property="og:description" content={description} />
        <meta property="og:image" content={image} />
        <meta property="og:url" content={canonicalUrl} />
        <meta property="og:type" content={type} />
        <meta property="og:site_name" content="Культура двух Столиц" />

        {/* Twitter meta tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={siteTitle} />
        <meta name="twitter:description" content={description} />
        <meta name="twitter:image" content={image} />

        {/* Additional meta tags */}
        <meta name="robots" content="index, follow" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charSet="UTF-8" />

        {/* Canonical */}
        <link rel="canonical" href={canonicalUrl} />
      </Helmet>
  );
}
