Marketing Dashboard

"use client";

import { RiMegaphoneLine } from "@remixicon/react";

import {
  AppShell,
  AppShellHeader,
} from "@/components/blocks/app-shell-01/components/app-shell";
import { MarketingDashboard } from "@/components/blocks/marketing-dashboard-01/components/marketing-dashboard";
import {
  MarketingDashboardActions,
  useMarketingDashboardControls,
} from "@/components/blocks/marketing-dashboard-01/components/marketing-dashboard-actions";

/** The marketing dashboard page inside the shared app shell. */
export function MarketingDashboardApp({
  basePath = "",
  links,
  popupClassName,
}: {
  basePath?: string;
  /** Hrefs for the other pages in the sidebar, by nav key. */
  links?: Partial<Record<string, string>>;
  popupClassName?: string;
}) {
  const controls = useMarketingDashboardControls();
  return (
    <AppShell
      selected="marketing"
      basePath={basePath}
      links={links}
      popupClassName={popupClassName}
    >
      <AppShellHeader
        title="Marketing"
        heading="Marketing"
        icon={RiMegaphoneLine}
        actions={<MarketingDashboardActions controls={controls} />}
      />
      <div className="pb-3">
        <MarketingDashboard
          popupClassName={popupClassName}
          filtersOpen={controls.filtersOpen}
          newCampaignOpen={controls.newCampaignOpen}
          onNewCampaignOpenChange={controls.setNewCampaignOpen}
        />
      </div>
    </AppShell>
  );
}