import { useState, FC } from "react";
import { cn } from "../../../lib/cn";
import { ChevroneDown } from "../../../assets/icons/groups";
import ContestItem from "./ContestItem";


interface Contest {
    id: number;
    name: string;
    authors: string[];
    startAt: string;
    registerAt: string;
    duration: number;
    members: number;
    statusRegister: "reg" | "nonreg";
}

interface GroupsBlockProps {
    contests: Contest[];
    title: string;
    className?: string;
}


const GroupsBlock: FC<GroupsBlockProps> = ({ contests, title, className }) => {


    const [active, setActive] = useState<boolean>(title != "Скрытые");


    return (

        <div className={cn(" border-b-[1px] border-b-liquid-lighter rounded-[10px]",
            className
        )}>
            <div className={cn(" h-[40px] text-[24px] font-bold flex gap-[10px] items-center cursor-pointer border-b-[1px] border-b-transparent transition-all duration-300",
               active &&  "border-b-liquid-lighter"
            )}
                onClick={() => {
                    setActive(!active)
                }}>
                <span>{title}</span>
                <img src={ChevroneDown} className={cn("transition-all duration-300",
                    active && "rotate-180"
                )} />
            </div>
            <div className={cn(" grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300",
                active && "grid-rows-[1fr] opacity-100"
            )}>
                <div className="overflow-hidden">
                    <div className="pb-[10px] pt-[20px]">
                    {
                        contests.map((v, i) => <ContestItem key={i} {...v} type={i % 2 ? "second" : "first"} />)
                    }    
                    </div>
                    
                </div>
            </div>
        </div>
    );
};

export default GroupsBlock;