import { RootState } from "@/app/redux/types";
import React from "react";
import { useSelector } from "react-redux";

interface MainContentProps {
  children: React.ReactNode;
}

export const MainContent = ({ children }: MainContentProps) => {
  const isSidebarOpen = useSelector((state: RootState) => state.ui.sidebarOpen);

  const style: React.CSSProperties = {
    marginLeft: isSidebarOpen ? "230px" : "30px",
    padding: "24px",
    minHeight: "100vh",
    width: isSidebarOpen ? "calc(100% - 240px)" : "calc(100% - 30px)",
    transition: "margin-left 0.3s ease-in-out, width 0.3s ease-in-out",
  };

  return <div style={style}>{children}</div>;
};