'use client';

import { useCheckoutContext } from "@/hooks/UseCheckout";
import Image from "next/image";

import Logomarca from "../../../../../public/assets/Images/Image/logoPlamev.svg";
import caixaendplamev from '../../../../../public/assets/Images/ImageLPCaixa/logo-plamev.svg'
import sale from '../../../../../public/assets/Images/ImageLPCaixa/Sale.svg'
import navigation from "../../../../../public/assets/Images/Icons/navigation_icons.svg";
import ModalStates from "@/components/ModalStates";
import { useSearchParams } from "next/navigation";
import { useWebContext } from "@/app/(site)/providers";

export const HeaderCheckout = () => {
    const {isMobile} = useWebContext();
    const { setIsModalStateOpen, isModalStateOpen, stateName } = useCheckoutContext();

    const searchParams = useSearchParams();
    const origem = searchParams.get("origem")

    return (
        <>
            <header className="flex items-center justify-between py-4 px-8 bg-plamev-yellow-50">
                <div className="w-[70px] lg:w-[150px] md:w-[150px]">
                    {origem !== 'caixa' && <Image src={Logomarca} height={72} alt="Plamev" />}
                    {origem === 'caixa' && <Image src={caixaendplamev} width={150} alt="Plamev" />}
                </div>

                <h1 className="m-0 p-0 text-plamev-blue-500 text-[10px] lg:text-[24px] md:text-[15px]  uppercase">Assinatura Plamev</h1>

                <div className="flex items-center justify-around lg:gap-5 md:gap-5 gap-1">
                    <button
                        onClick={() => setIsModalStateOpen(true)}
                        className="bg-[#FFFDFA] rounded-[8px] text-[--text-color] p-3 flex gap-3 items-center"
                    >
                        <Image
                            src={navigation}
                            alt="Sua Localização"
                            className="w-6 h-auto"
                        />
                        <span className="hidden sm:block">{stateName ?? "Sua localização"}</span>
                    </button>
                </div>

                <ModalStates isOpen={isModalStateOpen} onClose={() => setIsModalStateOpen(false)} />
            </header>

            {origem === 'caixa' && !isMobile &&
                <div className="bg-[#23404C] text-center h-[50px] sm:h-[40px] flex items-center justify-center gap-2">
                    <div>
                        <Image src={sale} alt="Sale" width={18.81} className="h-auto" />
                    </div>
                    <div className="text-white text-[20px]">
                        <span className="font-bold text-[20px] text-[#BFE381]">Desconto aplicado de 15%</span> para colaboradores CAIXA
                    </div>
                </div>
            }

            {origem === 'caixa' && isMobile &&
                <div className="bg-[#23404C] text-center h-[50px] sm:h-[40px] flex items-center justify-center gap-2">
                    <div>
                        <Image src={sale} alt="Sale" width={10.78} className="h-auto" />
                    </div>
                    <div className="text-white text-[11.46px]">
                        <span className="font-bold text-[11.46px] text-[#BFE381]">Desconto aplicado de 15%</span> para colaboradores CAIXA
                    </div>
                </div>
            }
        </>
    )

}
export default HeaderCheckout;