'use client';

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';

type Job = {
  id: number;
  title: string;
  city: string;
  contract_type: string;
  description: string;
  missions?: string;
  profile?: string;
};

export default function JobDetailPage() {
  const { id } = useParams();
  const [job, setJob] = useState<Job | null>(null);

  useEffect(() => {
    fetch(`/api/jobs/${id}`)
      .then(r => r.json())
      .then(d => setJob(d.item));
  }, [id]);

  if (!job) return <div className="text-muted">Chargement…</div>;

  return (
    <div className="max-w-6xl">
      <div className="card">
        <h1 className="text-2xl font-bold">{job.title}</h1>
        <div className="text-sm text-muted mt-1">
          {job.city} · {job.contract_type}
        </div>

        <section className="mt-6">
          <h2 className="font-semibold mb-2">Description du poste</h2>
          <p className="text-sm">{job.description}</p>
        </section>

        {job.missions && (
          <section className="mt-4">
            <h2 className="font-semibold mb-2">Missions</h2>
            <p className="text-sm">{job.missions}</p>
          </section>
        )}

        {job.profile && (
          <section className="mt-4">
            <h2 className="font-semibold mb-2">Profil recherché</h2>
            <p className="text-sm">{job.profile}</p>
          </section>
        )}

        <div className="mt-8 flex justify-center">
          <button className="btn btn-primary">
            Postuler à cette offre
          </button>
        </div>
      </div>
    </div>
  );
}