import * as Icon from "react-feather"

export const Box = ({children, id, title, icon = "Edit3"}) => {
    const IconComp = Icon[icon]
    return <div id={id} className="flex flex-col justify-content-between align-items-start bg-white rounded-lg shadow-md overflow-hidden px-2 py-4 mb-3 text-[#9ca3af] text-bold text-sm ">
        {title && 
            <div className="text-blue-500 font-black text-xl mt-2 mx-2 mb-4">
                <IconComp className="d-inline text-orange-500 me-1" />
                {title}
            </div>
        }
        {children}
    </div>
}