"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function MissionsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  
  return (
    <main className="w-full h-screen bg-white">
      <div className="w-full h-full px-4 pt-12 pb-4 flex">
        {/* Sidebar with light pink background */}
        <div className="w-[234px] min-w-[234px] bg-pink-50 border-r border-gray-100 overflow-y-auto">
          {/* Title section */}
          <div className="bg-pink-50 py-4 px-6 border-b border-pink-100">
            <h2 className="text-lg font-medium text-gray-800">CAP</h2>
            <p className="text-xs text-gray-600">Centre d'Administration et de Pilotage</p>
          </div>
          
          {/* Navigation links */}
          <nav className="mt-4">
            <Link href="/missions" passHref>
              <div className={`px-6 py-[10px] ${pathname === "/missions" ? "bg-white" : ""} hover:bg-white`}>
                <span className="text-sm font-normal text-gray-700">Mes Missions</span>
              </div>
            </Link>
            <Link href="/missions/new" passHref>
              <div className={`px-6 py-[10px] ${pathname === "/missions/new" ? "bg-white" : ""} hover:bg-white`}>
                <span className="text-sm font-normal text-gray-700">Nouvelle Mission</span>
              </div>
            </Link>
          </nav>
        </div>
        
        {/* Main content - white background */}
        <div className="flex-1 overflow-auto bg-white">
          {children}
        </div>
      </div>
    </main>
  );
}