import React from 'react'
import { SimpleGrid } from '@chakra-ui/react'
import { CardItemView, CardType } from './CardItem'

export type CardsViewProps = {
    columns: [number, number, number, number, number]
    cards: CardType[]
}

export function CardsView({ columns, cards }: CardsViewProps) {
    return (
        <SimpleGrid
            gap={2}
            spacing={2}
            minInlineSize="300px"
            columns={columns}
            pb={{ base: '40px', md: '60px', lg: '84px' }}
        >
            {cards.map((card, index) => (
                <CardItemView card={card} key={index} renderImage={(card) => <CardsView.ImageComponent {...card} />} />
            ))}
        </SimpleGrid>
    )
}

CardsView.ImageComponent = (card) => {
    return (
        <img
            src={card.image}
            alt={card.title}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
    )
}

CardsView.setCardImageRenderer = (renderer: (props: any) => JSX.Element) => {
    CardsView.ImageComponent = renderer
}