Deep Component Communication with provide and inject

import { defineComponent, provide, inject, ref } from 'vue';

// Parent Component
const ParentComponent = defineComponent({
  setup() {
    const theme = ref('dark');
    const toggleTheme = () => {
      theme.value = theme.value === 'dark' ? 'light' : 'dark';
    };

    // Provide a reactive value and a method
    provide('appTheme', theme);
    provide('toggleTheme', toggleTheme);

    return { theme, toggleTheme };
  },
  template: `
    <div :class="theme">
      <h2>Parent Component (Theme: {{ theme }})</h2>
      <button @click="toggleTheme">Toggle Theme</button>
      <MiddleComponent />
    </div>
  `
});

// Middle Component (can be many levels deep)
const MiddleComponent = defineComponent({
  template: `
    <div style="margin-left: 20px; border: 1px solid gray; padding: 10px;">
      <h3>Middle Component</h3>
      <ChildComponent />
    </div>
  `
});

// Child Component
const ChildComponent = defineComponent({
  setup() {
    // Inject the provided values
    const theme = inject('appTheme', 'default'); // 'default' is a fallback
    const toggleTheme = inject('toggleTheme');

    return { theme, toggleTheme };
  },
  template: `
    <div style="margin-left: 20px;">
      <h4>Child Component</h4>
      <p>Current Theme (Injected): {{ theme }}</p>
      <button v-if="toggleTheme" @click="toggleTheme">Toggle Theme from Child</button>
      <p v-else>Toggle Theme function not provided.</p>
    </div>
  `
});

export default ParentComponent;

/*
<template>
  <ParentComponent />
</template>
*/