import React, { useState, useEffect } from 'react'
import './index.scss'
import { Image } from '@tarojs/components'

export default function IndexMenu (props) {
  const { List = [] } = props
  return (
    <view className='components IndexMenu'>

      {/* tab */}
      <view className='Tab flex-h'>
        <view>
          <text className='active'>住宅</text>
        </view>
        <view>
          <text>文旅</text>
        </view>
        <view>
          <text>商办</text>
        </view>
        <view>
          <text>康养</text>
        </view>
      </view>

      {/* menu */}
      <view className='MenuList'>
        {
          List.map((item, index) => (
            <view className='MenuItem' key={`MenuItem-${index}`}>
              <view className='Img'>
                {
                  item.img &&
                  <Image mode='aspectFit' className='centerLabel' src={item.img || null} />
                }
              </view>
              <view className='Name'>菜单名称</view>
            </view>
          ))
        }
      </view>

    </view>
  )
}
