resolutionflow/frontend/src/components/common/PageMeta.tsx

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

interface PageMetaProps {
  title?: string
  description?: string
  ogImage?: string
  ogType?: string
}

const SITE_NAME = 'ResolutionFlow'
const DEFAULT_TAGLINE = 'AI-Powered Troubleshooting for MSPs'
const DEFAULT_DESCRIPTION = 'Transform troubleshooting into guided workflows with automatic documentation'

/**
 * Sets page-level <title> and Open Graph meta tags.
 * Wrap the app in <HelmetProvider> (see main.tsx).
 */
export function PageMeta({
  title,
  description = DEFAULT_DESCRIPTION,
  ogImage,
  ogType = 'website',
}: PageMetaProps) {
  const fullTitle = title ? `${title} | ${SITE_NAME}` : `${SITE_NAME} — ${DEFAULT_TAGLINE}`

  return (
    <Helmet>
      <title>{fullTitle}</title>
      <meta name="description" content={description} />

      {/* Open Graph */}
      <meta property="og:title" content={fullTitle} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content={ogType} />
      <meta property="og:site_name" content={SITE_NAME} />
      {ogImage && <meta property="og:image" content={ogImage} />}

      {/* Twitter */}
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:title" content={fullTitle} />
      <meta name="twitter:description" content={description} />
      {ogImage && <meta name="twitter:image" content={ogImage} />}
    </Helmet>
  )
}