const SidebarComponent = {
  template: `
<aside class="ai-sidebar__sidebar">
  <h1 class="ai-sidebar__title">AI Apps</h1>
  <nav>
    <ul class="ai-sidebar__app-list">
      <li v-for="app in apps" :key="app.id" class="ai-sidebar__app-item" @click="navigateToApp(app)">
        <div class="ai-sidebar__app-icon" :style="{ backgroundColor: app.color }">
          <i :class="app.icon"></i>
        </div>
        <span class="ai-sidebar__app-name">{{ app.name }}</span>
      </li>
    </ul>
  </nav>
  <div class="ai-sidebar__footer">
    <a href="/profile" class="ai-sidebar__app-item">
      <div class="ai-sidebar__app-icon" style="backgroundColor: #1F4E79">
        <i class="bi bi-person-circle"></i>
      </div>
      <span class="ai-sidebar__app-name">My Profile</span>
    </a>
  </div>
</aside>
  `,
  setup() {
    const apps = Vue.ref([
      { id: 1, name: 'iResearcher', icon: 'bi bi-search', color: '#3f72af', url: '/research-pro' },
      { id: 2, name: 'ArticleCrafter', icon: 'bi bi-pencil-square', color: '#3f72af', url: '/article-writer' },
      { id: 3, name: 'FollowUpPro', icon: 'bi bi-envelope-paper', color: '#3f72af', url: '/followup-agent' },
      { id: 4, name: 'DigiYatra Assistant', icon: 'bi bi-person-vcard', color: '#3f72af', url: '/digiyatra-assistant' },
      { id: 5, name: 'FileConverter', icon: 'bi bi-arrow-repeat', color: '#3f72af', url: '/file-convert' }
    ]);
    const navigateToApp = (app) => {
      window.location.href = app.url;
    };
    
    return {
      apps,
      navigateToApp
    };
  }
};