import Image from "next/image";
import { MainNav } from "@/components/main-nav";

export function SosShell({
  title,
  subtitle,
  actions,
  children
}: {
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <main className="min-h-screen bg-background">
      <section className="bg-primary">
        <div className="flex h-12 w-full items-center gap-4 px-3 lg:px-5">
          <div className="flex shrink-0 items-center gap-3">
            <Image src="/icon.png" alt="" width={28} height={28} className="rounded-md" />
            <span className="text-sm font-bold text-white">Gestion de projet</span>
          </div>
          <MainNav />
        </div>
      </section>
      {actions ? (
        <div className="border-b border-border bg-white">
          <div className="flex w-full justify-end gap-2 px-3 py-2 lg:px-5">{actions}</div>
        </div>
      ) : null}
      {children}
    </main>
  );
}