import React from 'react'
import { Menu } from 'antd'
import './index.less'

type LeftMenuProps = {
  title?: string
  options: { label: string; value: string }[]
  onChange: (key: string) => void
  value: string
}

const LeftMenu: React.FC<LeftMenuProps> = ({ title = '栏目/功能', options, onChange, value }) => {
  return (
    <div className="w-216px rounded-20px" style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
      <div className="p-5 text-16px text-opacity-85 menu-title">{title}</div>
      <Menu
        defaultSelectedKeys={[value]}
        onSelect={({ key }) => onChange(key)}
        mode="inline"
        items={options.map(item => ({
          label: item.label,
          key: item.value
        }))}
      />
    </div>
  )
}

export default LeftMenu
