import React from "react";
import { chevroneLeft, chevroneRight, arrowLeft } from "../../../assets/icons/header";
import { Logo } from "../../../assets/logos";
import { useNavigate } from "react-router-dom";

interface HeaderProps {
    missionId: number;
}

const Header: React.FC<HeaderProps> = ({
    missionId
}) => {
    const navigate = useNavigate();
    return (
        <header className="w-full h-[60px] flex items-center px-4 gap-[20px]">
            <img src={Logo} alt="Logo" className="h-[28px] w-auto cursor-pointer" onClick={() => { navigate("/home") }} />

            <img src={arrowLeft} alt="back" className="h-[24px] w-[24px] cursor-pointer" onClick={() => { navigate("/home/missions") }} />

            <div className="flex gap-[10px]">
                <img src={chevroneLeft} alt="back" className="h-[24px] w-[24px] cursor-pointer" onClick={() => { navigate(`/mission/${missionId - 1}`) }} />
                <span>{missionId}</span>
                <img src={chevroneRight} alt="back" className="h-[24px] w-[24px] cursor-pointer" onClick={() => { navigate(`/mission/${missionId + 1}`) }} />
            </div>

        </header>
    );
};

export default Header;