"use client";

import * as React from "react";
import { Megaphone } from "lucide-react";
import { NoDataFound } from "@/components/ui/no-data-found";
import { useMarketingAccess } from "./use-marketing-access";

type MarketingPageShellProps = {
  title: string;
  subtitle?: string;
  headerActions?: React.ReactNode;
  children: React.ReactNode;
};

export function MarketingPageShell({
  title,
  subtitle,
  headerActions,
  children,
}: MarketingPageShellProps) {
  const { canView } = useMarketingAccess();

  if (!canView) {
    return (
      <div className="flex h-full items-center justify-center p-4">
        <NoDataFound
          message="Marketing access required"
          description="You need READ permission on MARKETING to view this page."
        />
      </div>
    );
  }

  return (
    <div className="flex h-full flex-col gap-4.5 overflow-y-auto p-1 sm:p-2 md:p-4 scrollbar-themed motion-reduce:animate-none animate-in fade-in duration-500">
      <header className="flex flex-col gap-4 rounded-2xl border border-white/40 bg-white/50 p-4 shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] backdrop-blur-[15px] dark:bg-white/10 md:p-5">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex items-start gap-3">
            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#6C63FF]/10 text-[#6C63FF]">
              <Megaphone size={20} aria-hidden />
            </div>
            <div className="min-w-0">
              <h1 className="font-['Lexend'] text-2xl font-extrabold leading-tight tracking-tight text-text sm:text-[25px]">
                {title}
              </h1>
              {subtitle ? (
                <p className="mt-1.5 font-['Lexend_Deca'] text-xs leading-relaxed text-gray-500 sm:text-sm">
                  {subtitle}
                </p>
              ) : null}
            </div>
          </div>
          {headerActions ? (
            <div className="flex shrink-0 items-center justify-end">{headerActions}</div>
          ) : null}
        </div>
      </header>

      <main id="marketing-main" className="min-w-0">
        {children}
      </main>
    </div>
  );
}
