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;