import { useParams } from 'react-router';

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

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

interface SearchResultsProps<T> {
  data: T[];
  search: FilterCallback<T>;
}

export const SearchResults = ({
  data,
  search,
}: SearchResultsProps<CollectionItemProps['data']>) => {
  const { isOwner } = useAllianceContext();
  const { allianceId } = useParams();

  const filtered = data.filter(search).map((collection) => {
    return (
      <CollectionItem
        isOwner={isOwner}
        allianceId={allianceId!}
        data={collection}
        path={getPathToAnalytics(collection.id)}
        key={collection.id}
      />
    );
  });

  if (filtered.length) {
    return <Box spacingY={2}>{filtered}</Box>;
  } else {
    return null;
  }
};