import React, { useContext } from 'react';
import ecreIcons from '../../components/core/icons';
import ChangesLog from './ChangesLog';
import { SettingsContext } from '../App/SettingsContext';
import { translate } from '../../Helper';

function Header({title, subtitle}) {

    const {isPro, ecreActiveScreen, handleActiveScreen } = useContext(SettingsContext);

    return (
        <div className="entry-heading ecre-mb-8 lg:ecre-mb-12 ecre-flex ecre-flex-col-reverse lg:ecre-flex-row ecre-justify-between ecre-gap-2 lg:ecre-gap-5">
            { ecreActiveScreen == 'referrer_details' ? (
                <div className="wrapper">
                    <div className="ecre-text-[#111827] ecre-text-base ecre-font-semibold ecre-mb-2"><span onClick={()=> handleActiveScreen('reward_management')} className="ecre-cursor-pointer ecre-group ecre-align-[-2px] ecre-pr-1 w-4 h-4 ecre-inline-flex ecre-justify-center ecre-items-center">{ecreIcons.leftArrow}</span>{translate('referrer_details')}</div>
                    <div className="ecre-text-[#111827] ecre-text-sm ecre-font-normal">
                        <span onClick={()=> handleActiveScreen('reward_management')} className='ecre-cursor-pointer ecre-transition hover:ecre-text-blue-600 hover:ecre-underline'>{translate('reward_management')}</span>
                        <span className="ecre-mx-1">{ecreIcons.smRightArrow}</span>
                        <span className="ecre-text-blue-600">{translate('referrer_details')}</span>
                    </div>
                </div>
            ) : (
                <>
                    <div className="wrapper">
                        <div className="ecre-text-gray-900 ecre-text-xl ecre-font-medium ecre-mb-2">{title} </div>
                        <div className=" ecre-text-gray-500 ecre-text-sm ecre-font-normal">{subtitle}</div>
                    </div>
                    <div className="ecre-flex ecre-items-center ecre-mt-auto ecre-justify-end ecre-gap-x-5 ecre-gap-y-2.5">
                        <ChangesLog />
                        {!isPro && (
                            <button className="btn-upgrade ecre-group ecre-cursor-pointer ecre-border-0 ecre-text-orange-600 ecre-text-sm ecre-font-medium ecre-px-2.5 ecre-py-[5px] ecre-bg-orange-100 ecre-rounded-md ecre-justify-start ecre-items-center ecre-gap-[5px] ecre-inline-flex ecre-transition hover:ecre-bg-orange-600 hover:ecre-text-white"  onClick={() => window.open("https://cutt.ly/3ewdS5Go", "_blank")}>
                                <div className="icon ecre-leading-[1]">
                                    {ecreIcons.upgrade}
                                </div>
                            <span>{translate('upgrade')}</span>
                            </button>
                        )}
                        
                    </div>
                </>
            )}
        </div>
    );
}

export default Header;