import RightSidebar from "@/components/App/Shared/RightSidebar";
import NewsCard from "@/components/App/Shared/RightSidebar/NewsCard";
import TrendingCard from "@/components/App/Shared/RightSidebar/TrendingCard";
import WhoToFollowCard from "@/components/App/Shared/RightSidebar/WhoToFollowCard";
import TitleHeader from "@/components/App/Shared/TitleHeader";

const NotificationLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <div className="flex-grow md:min-w-[600px] max-w-[600px] border-x">
        <TitleHeader title="Notifications" />

        <div className="mt-4 pb-20">{children}</div>
      </div>

      <RightSidebar
        cards={[
          <TrendingCard key="trending" />,
          <WhoToFollowCard key="follow" />,
          <NewsCard key="news" />,
        ]}
      />
    </>
  );
};

export default NotificationLayout;