import { GameListRep } from "@/api/home";
import clsx from "clsx";
import { FC } from "react";
import Card, { CardProps } from "./Card";
export interface GroupProps extends CardProps {
    data?: GameListRep[];
    col?: number;
    row?: number;
    gapX?: number;
}

const GroupCard: FC<GroupProps> = (props) => {
    const { col = 3, row = 1, gapX = 8, data, ...other } = props;
    const cls = clsx(
        "grid",
        `grid-cols-${col} grid-rows-${row} gap-y-4 gap-x-[0.2rem]  justify-between`
    );
    return (
        // <div className={"flex flex-wrap justify-between gap-y-4"}>
        <div className={cls}>
            {data?.map((item, index) => <Card key={index} item={item} {...other} />)}
        </div>
    );
};

export default GroupCard;
