import { Meta, StoryFn } from "@storybook/react";
import { ProfileGridLayout } from "./ProfileGridLayout";
import React from "react";
import { ProfileSidebarList } from "../../../organisms";
import { profileItems } from "../../../../common/data";
import { ProfileSidebarItem } from "../../../molecules/ProfileSidebarItem";
import { ProfileCommunityLinkItem } from "../../../molecules";
export default {
  title: "template/Profile/Profile Grid Layout",
  component: ProfileGridLayout,
} as Meta;
const Template: StoryFn<any> = (args) => <ProfileGridLayout {...args} />;
export const Default = Template.bind({});
Default.args = {
  leftColSections: [
    <div className="w-full h-80"></div>,
    <div className="w-full h-36"></div>,
    <div className="w-full h-96"></div>,
    <div className="w-full h-36"></div>,
    <div className="w-full h-80"></div>,
    <div className="w-full h-36"></div>,
    <div className="w-full h-96"></div>,
    <div className="w-full h-36"></div>,
  ],
  rightColSections: [
    <ProfileSidebarList
      title="People you might know"
      containerClassName="p-9"
      listItems={profileItems.map((item, index) => {
        return <ProfileSidebarItem key={index} {...item} />;
      })}
    />,
    <ProfileSidebarList
      title="Communities you might like"
      containerClassName="p-9"
      listItems={profileItems.map((item, index) => {
        return <ProfileCommunityLinkItem key={index} {...item} />;
      })}
    />,
    <div className="w-full h-10"></div>,
  ],
};
