"use client";
import { Category, GameListRep } from "@/api/home";
import SwiperGroup from "@/components/Card/SwiperGroup";
import { useRouter } from "@/i18n";
interface Props {
    groupGames: Category[];
    // group: GroupType[];
}

const Manufacturer = (props: { data: GameListRep[] }) => {
    const { data } = props;
    const elements = data.map((item, index) => {
        return <img key={index} className={"rounded-[0.05rem]"} src={item.game_icon} alt="" />;
    });

    return <div className={"grid grid-cols-4 gap-x-2"}>{elements}</div>;
};

const HomeGames = (props: Props) => {
    const router = useRouter();
    const { groupGames = [] } = props;
    const todoHandler = (item: Category) => {
        router.push(`/gameList/?gameListFlag=${item.jump_id}`);
    };
    return (
        <>
            {groupGames.map((group, index) => {
                if (group.type !== 2) {
                    return (
                        <SwiperGroup
                            key={index}
                            group={group}
                            col={3}
                            visibleTodos={true}
                            todoHandler={todoHandler}
                        ></SwiperGroup>
                    );
                } else {
                    // 厂商
                    return (
                        <SwiperGroup
                            key={index}
                            group={group}
                            page={4}
                            visibleTodos={false}
                            todoHandler={todoHandler}
                            slideRender={(data) => <Manufacturer data={data} />}
                        ></SwiperGroup>
                    );
                }
            })}
        </>
    );
};

export default HomeGames;
