'use client'

import Link from "next/link";
import {Jobs} from "@/utils/Interfaces/interfaceTrabalheConosco";
import {maskMoney} from "@/utils/functions";
import {useWebContext} from "@/app/(site)/providers";

export default function Vagas(job: Jobs) {
    const {isMobile} = useWebContext();
    
    return (
        <>
            {!isMobile &&
                <div className="w-[800px] border-b-[2px] border-dashed mt-[35px] pb-[35px]">
                    <h2 className="text-poppins text-[32px] font-bold text-plamev-blue-500 mb-[1rem]">
                        {job.Nome}
                    </h2>

                    <h3 className="text-poppins text-[18px] font-bold text-plamev-blue-500 mb-[1rem]">
                        {job.CargosNome}
                    </h3>

                    {job.SalarioInicial &&
                        <p className="mb-[1rem]">
                            <b>Salário:</b>
                            {job.SalarioFinal && Number(job.SalarioFinal) > 0 && ' De '}
                            {Number(job.SalarioInicial) > 0 ? ' R$' + maskMoney(Number(job.SalarioInicial)) : ''}
                            {Number(job.SalarioFinal) > 0 ? ' até R$' + maskMoney(Number(job.SalarioFinal)) : ''}
                        </p>
                    }

                    <p className="mb-[1rem]"><b>Qtd. vagas:</b> {job.Quantidade}</p>

                    <p><b>Detalhes da vaga:</b></p>
                    <div className="mb-[1rem] text-justify [&_p]:mb-[1rem] [&_p:last-child]:mb-0" dangerouslySetInnerHTML={{__html: job.Descricao}}></div>
                    
                    <div className="flex gap-5">
                        <Link
                            href={`/trabalhe-conosco/vaga/${job.Id}`}
                            className=" bg-plamev-dark-50 text-plamev-blue-800 w-[219px] h-[54px] flex justify-center items-center rounded-[8px]"
                        >
                            Mais Detalhes
                        </Link>

                        <Link
                            href={`/trabalhe-conosco/cadastro/${job.Id}`}
                            className=" bg-plamev-blue-500 text-plamev-blue-50 w-[219px] h-[54px] flex justify-center items-center rounded-[8px]"
                        >
                            Cadastrar para a vaga
                        </Link>
                    </div>
                </div>
            }

            {isMobile &&
                <div className="w-[327px] border-b-[2px] border-dashed mt-[35px] pb-[35px]">
                    <h2 className="text-poppins text-[32px] font-bold text-plamev-blue-500 mb-[1rem]">
                        {job.Nome}
                    </h2>

                    <h3 className="text-poppins text-[18px] font-bold text-plamev-blue-500 mb-[1rem]">
                        {job.CargosNome}
                    </h3>

                    {job.SalarioInicial &&
                        <p className="mb-[1rem]">
                            <b>Salário:</b>
                            {job.SalarioFinal && Number(job.SalarioFinal) > 0 && ' De '}
                            {Number(job.SalarioInicial) > 0 ? ' R$' + maskMoney(Number(job.SalarioInicial)) : ''}
                            {Number(job.SalarioFinal) > 0 ? ' até R$' + maskMoney(Number(job.SalarioFinal)) : ''}
                        </p>
                    }

                    <p className="mb-[1rem]"><b>Qtd. vagas:</b> {job.Quantidade}</p>

                    <p><b>Detalhes da vaga:</b></p>
                    <p className="mb-[1rem] text-justify" dangerouslySetInnerHTML={{__html: job.Descricao}}></p>

                    <div className="flex flex-col gap-5">
                        <Link
                            href={`/trabalhe-conosco/vaga/${job.Id}`}
                            className=" bg-plamev-dark-50 text-plamev-blue-800 w-[100%] h-[54px] flex justify-center items-center rounded-[8px]"
                        >
                            Mais Detalhes
                        </Link>

                        <Link
                            href={`/trabalhe-conosco/cadastro/${job.Id}`}
                            className=" bg-plamev-blue-500 text-plamev-blue-50 w-[100%] h-[54px] flex justify-center items-center rounded-[8px]"
                        >
                            Cadastrar para a vaga
                        </Link>
                    </div>
                </div>
            }
        </>
    )
}