import { Helmet } from 'react-helmet-async';

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

export function SEO({
                      title = 'Культура двух столиц',
                      description = 'Discover the latest in art, music, theater, and cultural events from around the globe.',
                      keywords = ['culture', 'art', 'music', 'theater', 'film'],
                      image = 'https://images.unsplash.com/photo-1460661419201-fd4cecdf8a8b?auto=format&fit=crop&q=80&w=2070',
                      url = typeof window !== 'undefined' ? window.location.href : '',
                      type = 'website'
                    }: SEOProps) {
  const siteTitle = title.includes('CultureScope') ? title : `${title} | CultureScope`;

  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={url} />
        <meta property="og:type" content={type} />
        <meta property="og:site_name" content="CultureScope" />

        {/* 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" />
        <link rel="canonical" href={url} />
      </Helmet>
  );
}