import React from 'react'
import { View } from '@tarojs/components'
import { MenuItem } from './MenuItem'
import type { MenuSection as MenuSectionType } from '../types/settings'

interface MenuSectionProps {
  /** 菜单分组数据 */
  section: MenuSectionType
}

/**
 * 菜单分组组件
 * 显示一组相关的菜单项
 */
export const MenuSection: React.FC<MenuSectionProps> = ({ section }) => {
  return (
    <View className="bg-white mb-4">
      {/* 分组标题（可选） */}
      {section.title && (
        <View className="px-4 py-2 bg-gray-50">
          <View className="text-xs text-gray-500 font-medium">{section.title}</View>
        </View>
      )}

      {/* 菜单项列表 */}
      <View className="flex flex-col">
        {section.items.map((item, index) => (
          <View
            key={item.id}
            className={index > 0 ? 'border-t border-gray-100' : ''}
          >
            <MenuItem
              title={item.title}
              icon={item.icon}
              bgColor={item.bgColor}
              iconColor={item.iconColor}
              onPress={item.onPress}
            />
          </View>
        ))}
      </View>
    </View>
  )
}
