"use client";
import { use, useEffect, useLayoutEffect, useState } from "react";
import Cards from "./Cards";
import mecredApi from "@/axiosConfig";
import { Button, Divider } from "@mui/material";
import Link from "next/link";

export default function GroupCardsCollections({ data, cardsPerRow, boxShadow }) {
    const [expanded, setExpanded] = useState(false);
    const [showButton, setShowButton] = useState(false);

    const handleResize = (data) => {
            setShowButton(data.length > cardsPerRow);
    };

    const toggleContent = () => {
        setExpanded(!expanded);
    };



    useEffect(() => {
        handleResize(data);
    }), [cardsPerRow];


    return (
        <div className="flex flex-col">
            <div className="mx-1 flex flex-col">
                <div className="ml-6 inline-block">
                    {/* <h1 className="text-xl font-bold mb-4 text-gray-600">
                        <Link href="/perfil" className="pl-1">
                            {title}
                        </Link>
                    </h1> */}
                </div>
                <div id="contentSize" className={`flex content flex-wrap max-sm:justify-center max-sm:ml-0  md:ml-0 ml-8 ${expanded ? "" : "overflow-y-hidden h-[290px]"}`}>

                    {data.map((item, index) => {
                        return (
                            <Cards
                                key={index}
                                id={item['collectionable']['id']}
                                title={item["collectionable"]["name"]}
                                author={item["collectionable"]["publisher"]["name"]}
                                authorId={item["collectionable"]["publisher"]["id"]}
                                avatar={item["collectionable"]["publisher"]["avatar"]}
                                image={item["collectionable"]["thumbnail"]}
                                shadow={boxShadow}
                                updated_at={item["collectionable"]["updated_at"]}
                                
                            />
                        );
                    })}
                </div>
            </div>
            <Divider className="mr-8 max-md:mr-0 mb-8">
                {showButton ?
                    (
                        <Button
                            fullWidth
                            disableElevation
                            variant="outlined"
                            className="mt-2 border-secondary rounded-xl hover:border-secondary-hover text-gray-700 normal-case flex gap-2"
                            onClick={toggleContent}
                        >
                            {expanded ? "Fechar" : "Carregar mais"}
                        </Button>
                    ) : null}
            </Divider>
        </div>
    );
}