"use client";

import React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { Kanban, Plus } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function MissionsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  
  return (
    <div className="flex h-[calc(100vh-4rem)] overflow-hidden">
      {/* Sidebar */}
      <div className="hidden md:flex w-64 border-r flex-col bg-white">
        <div className="p-4 border-b">
          <h2 className="text-xl font-semibold flex items-center">
            <Kanban className="mr-2 h-5 w-5" />
            Missions
          </h2>
        </div>
        <ScrollArea className="flex-1">
          <div className="p-3 space-y-1">
            <Link href="/missions" passHref>
              <Button 
                variant={pathname === "/missions" ? "secondary" : "ghost"} 
                className="w-full justify-start text-left"
              >
                Mes Missions
              </Button>
            </Link>
            <Link href="/missions/new" passHref>
              <Button 
                variant={pathname === "/missions/new" ? "secondary" : "ghost"} 
                className="w-full justify-start text-left"
              >
                <Plus className="mr-2 h-4 w-4" />
                Poster une Mission
              </Button>
            </Link>
          </div>
        </ScrollArea>
      </div>
      
      {/* Main content */}
      <div className="flex-1 overflow-auto">
        {children}
      </div>
    </div>
  );
}