import React from 'react'

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="h-full w-max-234px rounded-4px shadow-card">
      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] text-left">
        <span>{title}</span>
      </div>
      <div className="p-4 bg-white" style={{ height: 'calc(100vh - 201px)' }}>
        <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
          {options.map(item => (
            <li
              key={item.value}
              className={[
                'flex justify-between items-center py-2 px-5 cursor-pointer',
                item.value === value ? 'scale-up-center' : ''
              ].join(' ')}
              onClick={() => onChange(item.value)}>
              {item.label}
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

export default LeftMenu