import { useParams } from 'react-router-dom';

import { Box } from 'components/common';
import { CollectionItem } from 'components/alliance/CollectionItem';

import { useAllianceContext } from './AllianceContext';
import { getPathToAnalytics } from 'pages/alliances/$alliance/analytics/getPathToAnalytics';
import { AllianceQuery } from 'types/graphql';

type AllianceCollections = AllianceQuery['alliance']['collections'];

export const CollectionsList = ({ items }: { items: AllianceCollections }) => {
  const ctx = useAllianceContext();

  const { allianceId } = useParams();

  return (
    <Box spacingY={2}>
      {items?.map((collection) => {
        return (
          <CollectionItem
            isOwner={ctx.isOwner}
            allianceId={allianceId!}
            data={collection}
            path={getPathToAnalytics(collection.id)}
            key={collection.id}
          />
        );
      })}
    </Box>
  );
};