"use client"

import { useState } from "react"
import BarreLaterale from "@/app/composants/navigation/BarreLaterale"
import BarreSuperieure from "@/app/composants/en-tete/BarreSuperieure"
import FiltreOffres from "./filtreoffre/FiltreOffres"
import TableauCandidatures from "./tableau-candidature/TableauCandidatures"
import ResumeFooter from "./resumerfooter/ResumeFooter"

export interface FiltresActifs {
  lieu: string
  type: string
  date: string
}

export default function PageCandidatures() {
  const [filtres, setFiltres] = useState<FiltresActifs>({
    lieu: "Tous",
    type: "Tous",
    date: "Tous",
  })

  return (
    <div className="flex h-screen overflow-hidden bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display">
      <BarreLaterale />

      <main className="flex-1 flex flex-col overflow-hidden">
        <BarreSuperieure />
        <div className="flex-1 overflow-y-auto p-8">
          {/* FiltreOffres reçoit les filtres et peut les modifier */}
          <FiltreOffres filtres={filtres} onChange={setFiltres} />

          {/* TableauCandidatures reçoit les filtres en lecture */}
          <TableauCandidatures filtres={filtres} />

          <ResumeFooter />
        </div>
      </main>
    </div>
  )
}