<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core';

const TemplateFoo = createReusableTemplate<
  { msg: string },
  {
    default: object;
    slotNameee: {
      slotPropName: string;
    };
  }
>();
</script>

<template>
  <h1>Use Reusable Template</h1>

  <TemplateFoo.define v-slot="{ $slots, msg }">
    <div>Hello {{ msg.toUpperCase() }}</div>
    <component :is="$slots.slotNameee" slotPropName="valueee" />
    <component :is="$slots.default" />
  </TemplateFoo.define>

  <h2>TemplateFoo.reuse</h2>
  <TemplateFoo.reuse msg="World" />

  <h2>TemplateFoo.reuse with slotNameee(with props)</h2>
  <TemplateFoo.reuse msg="Reusable">
    <template #slotNameee="{ slotPropName }">
      <div>Passing Slots,{{ { slotPropName } }}</div>
    </template>
  </TemplateFoo.reuse>

  <h2>TemplateFoo.reuse with slot.default</h2>
  <TemplateFoo.reuse msg="Reusable">
    <div>Passing Slots.Default</div>
  </TemplateFoo.reuse>
</template>
