<script
  src="https://widget.try-on.ru/fitting-widget-bundle.js"
  id="fitting-widget-bundle"
></script>
<script id="fitting-init">
  window.fitting = window.fitting || function() {
    (window.fitting.q = window.fitting.q || []).push(arguments);
  };
  window.fitting('init', {
    apiKey: 'YOUR_API_KEY'
  });
</script>

// composables/useFittingWidget.ts
export interface TryonItem {
  productName: string
  url: string
  productId?: string
}

export interface CreateOptions {
  targetElementId: string
  model?: 'balanced' | 'quality' | 'speed'
  tryonItems: TryonItem[]
}

declare global {
  interface Window {
    fitting: (command: string, options?: unknown) => void
  }
}

export function useFittingWidget() {
  const open = (options: CreateOptions) => {
    window.fitting('create', options)
  }

  const close = () => {
    window.fitting('close')
  }

  return { open, close }
}

<!-- components/TryOnWidget.vue -->
<template>
  <div>
    <div
      id="widget-container"
      style="width: 100%; max-width: 600px; aspect-ratio: 3/4"
    />
    <button @click="handleTryOn">Try On</button>
  </div>
</template>

<script setup lang="ts">
import { useFittingWidget, type TryonItem } from '~/composables/useFittingWidget'

const props = defineProps<{
  productName: string
  imageUrl: string
}>()

const { open } = useFittingWidget()

const handleTryOn = () => {
  open({
    targetElementId: 'widget-container',
    model: 'balanced',
    tryonItems: [
      {
        productName: props.productName,
        url: props.imageUrl,
      },
    ],
  })
}
</script>