import { IconBili, IconPaul, IconRead, IconSetting } from "~assets/icons";
import styles from "./popup.module.less";

const items = [
  {
    name: "在看",
    icon: <IconRead />,
    value: "read",
  },
  {
    name: "增加手办",
    icon: <IconBili />,
    value: "toy",
  },
  {
    name: "访问网站",
    icon: <IconPaul />,
    value: "home",
  },
  {
    name: "插件设置",
    icon: <IconSetting />,
    value: "options",
  }
];

interface MenuProps {
  onClick: (value: string) => void;
}

function Menu({ onClick }: MenuProps) {
  return (
    <div className={styles.menu}>
      {items.map((item) => (
        <div key={item.value} className={styles.item} onClick={() => onClick(item.value)}>
          {item.icon && item.icon}
          {item.name}
        </div>
      ))}
    </div>
  );
}

export default Menu;