import { ArrowLeftOutlined, HeartOutlined, MenuOutlined, ScheduleOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
import { FloatButton } from "antd";
import { useNavigate } from "react-router";

export function MenuButtons() {
  const navigate = useNavigate();
  return (
    <FloatButton.Group trigger="click" icon={<MenuOutlined />}>
      <FloatButton icon={<UserOutlined />} onClick={() => navigate('/user-center')} />
      <FloatButton icon={<ScheduleOutlined />} onClick={() => navigate('/')} />
      <FloatButton icon={<HeartOutlined />} onClick={() => navigate('/fav-players')} />
      <FloatButton icon={<SearchOutlined />} onClick={() => navigate('/find')} />
      <FloatButton icon={<ArrowLeftOutlined />} onClick={() => navigate(-1)} />
    </FloatButton.Group>
  );
}