<template>
  <div class="groups-management h-full bg-gray-50 dark:bg-gray-900">
    <div class="p-6">
      <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">群聊管理</h1>
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
          <i class="fas fa-plus mr-2"></i>
          创建群聊
        </button>
      </div>

      <!-- 群聊列表 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
        <div
            v-for="group in mockGroups"
            :key="group.id"
            class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-200"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-lg mr-3">
              {{ group.name.charAt(0) }}
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 dark:text-gray-200">{{ group.name }}</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">{{ group.memberCount }} 人</p>
            </div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">{{ group.description }}</p>
          <div class="flex gap-2">
            <button class="flex-1 px-3 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors">
              进入群聊
            </button>
            <button class="px-3 py-2 bg-gray-500 text-white rounded-lg text-sm hover:bg-gray-600 transition-colors">
              设置
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const mockGroups = ref([
  {
    id: 1,
    name: '技术交流群',
    memberCount: 128,
    description: '分享技术心得，讨论前沿技术'
  },
  {
    id: 2,
    name: '项目讨论组',
    memberCount: 45,
    description: '项目进度讨论和问题解决'
  },
  {
    id: 3,
    name: '休闲聊天室',
    memberCount: 89,
    description: '轻松愉快的日常交流'
  }
]);
</script>
