import React, { useState } from 'react'
import '@/pages/Role/System/components/RoleMenu/index.less'

interface ShowTitleMenuProps {
  itemTitle: string
  onSelect?: (vaule: string) => void
}
const showTitleMenu: React.FC<ShowTitleMenuProps> = ({ itemTitle, onSelect }) => {
  const [activeId, setActiveId] = useState('')
  const handleItemClick = (id: string) => {
    setActiveId(id)
    if (onSelect) {
      onSelect(id)
    }
  }
  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] justify-around text-left">
        <span>栏目/功能</span>
      </div>
      <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
        <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
          {itemTitle.map(item => (
            <li
              key={item.value}
              className={[
                'flex justify-between items-center py-2 px-5 cursor-pointer',
                item.value === activeId ? 'scale-up-center' : ''
              ].join(' ')}
              onClick={() => handleItemClick(item.value)}>
              {item.label}
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

export default showTitleMenu