import { FC } from 'react';
import classNames from 'classnames';

import { Grid } from '@servicetitan/anvil2';

import { BrandCard } from '../brand-card/brand-card';
import { BrandCardProps } from '../../../utils/interfaces';

import * as Styles from '../styles.module.less';

export const CardsGrid: FC<{
    brands: BrandCardProps[];
    qaIdentifier: string;
}> = ({ brands, qaIdentifier }) => (
    <Grid className={classNames(Styles.grid, `qa-${qaIdentifier}-cards-grid`)} gap="6">
        {brands.map(brand => (
            <BrandCard key={brand.id} {...brand} />
        ))}
    </Grid>
);