<script>
  import { t } from '$lib/translations';

  /** @type {string} Title of the page */
  export let title;

  /** @type {string} Description of the page */
  export let description;

  /** @type {string} SEO keywords */
  export let keywords;

  /** @type {string} Canonical URL of the page */
  export let url;

  /** @type {string} Main image URL for sharing */
  export let image;

  /** @type {string} Open Graph type (e.g., 'website', 'article') */
  export let ogType = 'website';

  /** @type {string} Open Graph title (defaults to title) */
  export let ogTitle = title;

  /** @type {string} Open Graph description (defaults to description) */
  export let ogDescription = description;

  /** @type {string} Open Graph image (defaults to image) */
  export let ogImage = image;

  /** @type {string} Twitter card type (e.g., 'summary_large_image') */
  export let twitterCard = 'summary_large_image';

  /** @type {string} Twitter title (defaults to title) */
  export let twitterTitle = title;

  /** @type {string} Twitter description (defaults to description) */
  export let twitterDescription = description;

  /** @type {string} Twitter image (defaults to image) */
  export let twitterImage = image;
</script>

<svelte:head>
  <title>{$t(title)}</title>
  <meta name="description" content={$t(description)} />
  <meta name="keywords" content={$t(keywords)} />

  <!-- Open Graph -->
  <meta property="og:type" content={ogType} />
  <meta property="og:title" content={$t(ogTitle)} />
  <meta property="og:description" content={$t(ogDescription)} />
  <!-- <meta property="og:image" content={$t(ogImage)} /> -->
  <meta property="og:url" content={$t(url)} />

  <!-- Twitter -->
  <!-- <meta name="twitter:card" content={$t(twitterCard)} /> -->
  <meta name="twitter:title" content={$t(twitterTitle)} />
  <meta name="twitter:description" content={$t(twitterDescription)} />
  <!-- <meta name="twitter:image" content={$t(twitterImage)} /> -->
</svelte:head>
