import { Head } from '@inertiajs/react';

type MetaHeadProps = {
    title: string;
    description: string;
    keywords?: string;
    canonicalUrl: string;
    site_name: string;
    favicon: string;
    phone?: string;
    locale?: string;
};

export default function MetaHead({
    title,
    description,
    keywords = '',
    canonicalUrl,
    site_name,
    favicon,
    phone = '',
    locale = 'tr',
}: MetaHeadProps) {
    return (
        <Head>
            <title>{title}</title>
            <meta charSet="utf-8" />
            <meta name="author" content="Kreatifmerkezi" />
            <meta name="description" content={description} />
            <meta name="keywords" content={keywords} />
            <link rel="canonical" href={canonicalUrl} />
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:site" content={site_name} />
            <meta name="twitter:title" content={title} />
            <meta name="twitter:description" content={description} />
            <meta name="twitter:creator" content="Kreatifmerkezi" />
            <meta name="twitter:image:src" content={favicon} />
            <meta property="og:title" content={title} />
            <meta property="og:type" content="article" />
            <meta property="og:url" content={canonicalUrl} />
            <meta property="og:image" content={favicon} />
            <meta property="og:description" content={description} />
            <meta property="og:site_name" content={site_name} />
            <meta property="fb:admins" content={phone} />
            <link rel="icon" type="image/png" href={favicon} />
            <link rel="shortcut icon" href={favicon} />
            <link rel="apple-touch-icon" href={favicon} />
            <link rel="apple-touch-icon" sizes="72x72" href={favicon} />
            <link rel="apple-touch-icon" sizes="114x114" href={favicon} />

            {/* Schema.org Structured Data */}
            <script type="application/ld+json">
                {JSON.stringify({
                    '@context': 'https://schema.org',
                    '@type': 'WebSite',
                    url: canonicalUrl,
                    name: site_name,
                    inLanguage: locale,
                    potentialAction: {
                        '@type': 'SearchAction',
                        target: `${canonicalUrl}/search?q={search_term_string}`,
                        'query-input': 'required name=search_term_string',
                    },
                })}
            </script>
            <script type="application/ld+json">
                {JSON.stringify({
                    '@context': 'https://schema.org',
                    '@type': 'Organization',
                    name: site_name,
                    url: canonicalUrl,
                    logo: favicon,
                    contactPoint: {
                        '@type': 'ContactPoint',
                        telephone: phone,
                        contactType: 'customer service',
                        areaServed: 'TR',
                        availableLanguage: ['Turkish', 'English'],
                    },
                })}
            </script>
            <script type="application/ld+json">
                {JSON.stringify({
                    '@context': 'https://schema.org',
                    '@type': 'WebPage',
                    name: title,
                    url: canonicalUrl,
                    description: description,
                    inLanguage: locale,
                    isPartOf: {
                        '@type': 'WebSite',
                        url: canonicalUrl,
                    },
                })}
            </script>
        </Head>
    );
}
