import React from "react";
export interface ProfileGridLayoutProps {
  leftColSections: React.ReactNode[];
  rightColSections: React.ReactNode[];
}
const ProfileGridLayout = ({
  leftColSections,
  rightColSections,
}: ProfileGridLayoutProps) => {
  return (
    <div className="relative grid border-y border-mono-200 grid-cols-5 w-full items-start max-w-6xl mx-auto">
      <div className="flex flex-col flex-1 col-span-5 md:col-span-3 items-start divide-y md:border-r border-mono-200 divide-mono-200">
        {leftColSections?.map((child, index) => (
          <div key={index} className="h-full w-full">
            {child}
          </div>
        ))}
      </div>
      <div className="flex divide-y col-span-5 md:col-span-2 flex-col flex-1 items-center gap-9">
        <div className="flex flex-col items-start w-full">
          {rightColSections?.map((child, index) => (
            <div key={index} className="h-full w-full">
              {child}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export { ProfileGridLayout };
