import { HeartOutlined, ScheduleOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Flex } from "antd";
import { useNavigate } from "react-router";
import styled from "styled-components";
import { isRunningStandalone } from "@/utils/front";

const StyledContainer = styled.div`
  position: fixed;
  bottom: -1px;
  left: -2px;
  width: calc(100vw + 4px);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
  z-index: 8;
  background: #181818;
  font-size: 16px;
  padding: 8px;
  padding-bottom: ${isRunningStandalone() ? '34px' : ''};
  box-sizing: border-box;
  .ant-btn {
    padding: 24px;
  }
`;

export const AppBar = () => {
  const navigate = useNavigate();
  return (
    <StyledContainer>
      <Flex wrap align="center" justify="space-around">
        <Button
          type="text"
          icon={<ScheduleOutlined size={64} />}
          onClick={() => navigate('/')}
        />
        <Button
          type="text"
          icon={<HeartOutlined />}
          onClick={() => navigate('/fav-players')}
        />
        <Button
          type="text"
          icon={<SearchOutlined />}
          onClick={() => navigate('/find')}
        />
        <Button
          type="text"
          icon={<UserOutlined />}
          onClick={() => navigate('/user-center')}
        />
      </Flex>
    </StyledContainer>
  );
}