'use client'

import { useEffect, useState } from "react";
import Vagas from "@/app/(site)/trabalhe-conosco/_components/Vagas/page";
import Image from "next/image";
import { Inter } from "next/font/google";
import ImageTrabalheConosco from "../../../../public/assets/Images/ImageTrabalheConosco/trabalheConosco.png";
import { getJobs } from "@/actions/pageWorkTous";
import { Jobs } from "@/utils/Interfaces/interfaceTrabalheConosco";
import { useWebContext } from "@/app/(site)/providers";

const inter = Inter({
    subsets: ['latin'],
    display: 'swap',
})

export default function Page() {
    const [vagas, setVagas] = useState<Jobs[]>([]);
    const { isMobile, setDataVagas } = useWebContext();

    useEffect(() => {
        (async () => {
            try {
                const data = await getJobs('');
                if (data && typeof data === 'object') {
                    setVagas(Object.values(data));
                    setDataVagas(Object.values(data));
                } else {
                    console.warn('getJobs returned unexpected data:', data);
                    setVagas([]);
                }
            } catch (error) {
                console.error('Error fetching jobs:', error);
                setVagas([]);
            }
        })();
    }, [setDataVagas]);

    return (
        <>
            {!isMobile &&
                <section className="container mx-auto lg:p-8 lg:pb-0 lg:mt-10">
                    <div className="flex justify-between items-center">
                        <div className="w-[488px]">
                            <h1 className="text-grandstander uppercase text-[56px] text-plamev-blue-500 leading-[56px]">faça
                                parte do time plamev.</h1>
                            <p className={`${inter.className} text-[16px] text-plamev-dark-400`}>As vagas disponíveis
                                estão
                                listadas abaixo, escolha a que você melhor se encaixa e envie-nos
                                seu currículo.</p>
                        </div>

                        <div className="w-[50%] flex justify-end">
                            <Image
                                src={ImageTrabalheConosco}
                                alt="faça parte do time plamev"
                            />
                        </div>
                    </div>
                </section>
            }

            {isMobile &&
                <section className="container mx-auto lg:p-8 lg:pb-0 lg:mt-10">
                    <div className="flex flex-col justify-between items-center">
                        <div className="w-[100%] flex justify-end">
                            <Image
                                src={ImageTrabalheConosco}
                                alt="faça parte do time plamev"
                            />
                        </div>

                        <div className="w-[343px] mt-[32px]">
                            <h1 className="text-grandstander uppercase text-[40px] text-plamev-blue-500 text-center leading-[40px]">
                                faça parte do time plamev.
                            </h1>
                            <p className={`${inter.className} text-[16px] text-center text-plamev-dark-400`}>
                                As vagas disponíveis estão listadas abaixo, escolha a que você melhor se encaixa e
                                envie-nos seu currículo.
                            </p>
                        </div>
                    </div>
                </section>
            }

            {!isMobile &&
                <section className="contain er mx-auto lg:p-8 flex flex-col items-center justify-center">
                    {vagas.length > 0 && vagas.map((item: Jobs, i: number) => (
                        <>
                            <Vagas
                                Descricao={item.Descricao}
                                DescricaoCompleta={item.DescricaoCompleta}
                                Id={item.Id}
                                Nome={item.Nome}
                                Quantidade={item.Quantidade}
                                SalarioFinal={item.SalarioFinal}
                                SalarioInicial={item.SalarioInicial}
                                DepartamentosNome={item.DepartamentosNome}
                                CargosNome={item.CargosNome}
                            />
                        </>
                    ))}
                </section>
            }

            {isMobile &&
                <section className="container mx-auto lg:p-8 flex flex-col items-center justify-center">
                    {vagas.length > 0 && vagas.map((item: Jobs, i: number) => (
                        <>
                            <Vagas
                                Descricao={item.Descricao}
                                DescricaoCompleta={item.DescricaoCompleta}
                                Id={item.Id}
                                Nome={item.Nome}
                                Quantidade={item.Quantidade}
                                SalarioFinal={item.SalarioFinal}
                                SalarioInicial={item.SalarioInicial}
                                DepartamentosNome={item.DepartamentosNome}
                                CargosNome={item.CargosNome}
                            />
                        </>
                    ))}
                </section>
            }
        </>
    )
}