"use client"
import Link from "next/link"
import { useParams, useRouter } from "next/navigation"
import { useContext, useEffect } from "react";
import { BoardContext } from "./BoardContext";


const Card = ({id, name}: {id:string, name:string}) => {
    const router = useRouter();
    const params = useParams();
    const {openCard} = useContext(BoardContext);


    useEffect(() => {
        if(params.cardId && !openCard){
          const {boardId, cardId} = params;
          router.push(`/boards/${boardId}`);
          router.push(`/boards/${boardId}/cards/${cardId}`);
        }
        if(!params.cardId && openCard){
          router.push(`/boards/${params.boardId}`);
        }

    }, [params.cardId])


  return (
    <Link href={`/boards/${params.boardId}/cards/${id}`} className='border block my-2 p-2 rounded-sm bg-white '>
        <span>{name}</span>
    </Link>
  )
}

export default Card