import React from 'react';
import classnames from 'classnames';
import { useNavigate } from 'react-router-dom';
import style from './style.module.less';

export interface LinkMenuItemType {
  path: string;
  label: string;
}

export interface LinkMenuProp {
  menus: LinkMenuItemType[];
  defaultSelectedKey?: string;
}

const LinkMenu: React.FC<LinkMenuProp> = function ({ menus, defaultSelectedKey }) {
  const navigate = useNavigate();
  const [selectedKey, setSelectedKey] = React.useState<string>(defaultSelectedKey || menus[0].path);

  return (
    <div className="h-14 flex px-6 gap-x-4 items-center">
      {menus.map(({ path, label }) => (
        <span
          key={path}
          className={classnames(
            style.item,
            selectedKey === path && style.light,
            'h-full flex items-center px-4 cursor-pointer hover:text-white',
            selectedKey === path ? 'text-white' : 'text-textColorBase',
          )}
          onClick={() => {
            setSelectedKey(path);
            navigate(path);
          }}>
          {label}
        </span>
      ))}
    </div>
  );
};

export default LinkMenu;