import { useModal } from 'components/layers';
import { Box } from 'components/common';

import { WorkspaceListItem } from './WorkspaceListItem';
import { DeleteWorkspaceModal, RenameWorkspaceModal } from './modals';

export const WorkspacesList = ({
  items,
}: {
  items: { id: string; name: string; totalProfiles: number }[];
}) => {
  const deleteWorkspaceModal = useModal(DeleteWorkspaceModal);
  const renameWorkspaceModal = useModal(RenameWorkspaceModal);

  return (
    <Box
      height="100%"
      display="flex"
      align="center"
      justify="center"
      wrap
      padding={2}
      style={{ alignContent: 'center' }}
    >
      {items?.map((workspace) => {
        return (
          <Box padding={2} key={workspace.id}>
            <WorkspaceListItem
              data={workspace}
              onRename={renameWorkspaceModal.show}
              onDelete={deleteWorkspaceModal.show}
            />
          </Box>
        );
      })}
    </Box>
  );
};