import React from 'react';
import styled from 'styled-components';

import type { CatalogEntityConfig } from '@redocly/config';
import type { BffCatalogEntity } from '@redocly/theme/core/types';

import { breakpoints } from '@redocly/theme/core/utils';
import { CatalogCard } from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCard';

export type CatalogCardViewProps = {
  entities: BffCatalogEntity[];
  catalogConfig: CatalogEntityConfig;
};

export function CatalogCardView({ entities, catalogConfig }: CatalogCardViewProps) {
  return (
    <CatalogCardsWrapper data-component-name="Catalog/CatalogCardView/CatalogCardView">
      {entities.map((entity) => (
        <CatalogCard key={entity.id} entity={entity} catalogConfig={catalogConfig} />
      ))}
    </CatalogCardsWrapper>
  );
}

const CatalogCardsWrapper = styled.div`
  display: grid;
  gap: var(--catalog-cards-group-gap);
  margin-bottom: var(--spacing-xl);
  overflow-x: auto;

  @media screen and (min-width: ${breakpoints.small}) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (max-width: ${breakpoints.medium}) {
    margin-top: 0;
  }
`;