// main.js (or main.ts)
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// App.vue (Parent Component that Provides)
<template>
  <div :class="{ 'dark-theme': theme.theme.value === 'dark' }" class="app-container">
    <h1>Parent Component (Theme: {{ theme.theme.value }})</h1>
    <ChildComponent />
    <button @click="theme.toggleTheme">Toggle Theme from App.vue</button>
  </div>
</template>

<script>
import { provide, ref, readonly } from 'vue';
import ChildComponent from './components/ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const appName = ref('My Awesome App');
    const theme = ref('light');

    const toggleTheme = () => {
      theme.value = theme.value === 'light' ? 'dark' : 'light';
    };

    // Provide a readonly reactive value for appName
    provide('appName', readonly(appName));

    // Provide a reactive value and a method to modify it for theme
    provide('theme', {
      theme: readonly(theme), // Expose theme as readonly
      toggleTheme // Expose the method to change theme
    });

    return {
      theme // Expose theme to App.vue's template for its own class binding
    };
  },
};
</script>

<style>
.app-container {
  padding: 20px;
  border: 2px solid #3498db;
  border-radius: 10px;
  margin-bottom: 20px;
}
.dark-theme {
  background-color: #333;
  color: white;
}
</button> {
  margin-top: 10px;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

// components/ChildComponent.vue (Child Component that Injects)
<template>
  <div :class="{ 'dark-theme': theme.theme.value === 'dark' }" class="child-container">
    <h2>Child Component</h2>
    <p>App Name from Parent: {{ appName }}</p>
    <p>Current Theme: {{ theme.theme.value }}</p>
    <button @click="theme.toggleTheme">Toggle Theme from Child</button>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    // Inject values provided by a parent
    const appName = inject('appName');
    const theme = inject('theme'); // Injects { theme: Ref<string>, toggleTheme: Function }

    return {
      appName,
      theme,
    };
  },
};
</script>

<style scoped>
.child-container {
  padding: 15px;
  border: 1px dashed #2ecc71;
  border-radius: 8px;
  margin: 10px 0;
}
.dark-theme {
  background-color: #555;
  color: #eee;
}
</style>