import { useGlobalStore } from '@assist/state/Global'
import { useTasksStore } from '@assist/state/Tasks'
import { UpdateLogo } from '@assist/tasks/UpdateLogo'
import { UpdateSiteDescription } from '@assist/tasks/UpdateSiteDescription'
import { UpdateSiteIcon } from '@assist/tasks/UpdateSiteIcon'
export const ModalButton = ({ task }) => {
const { pushModal } = useGlobalStore()
const { isCompleted } = useTasksStore()
const Components = {
UpdateLogo,
UpdateSiteDescription,
UpdateSiteIcon,
}
if (!Components[task.modalFunction]) return null
return (
<button
className="px-3 py-2 leading-tight min-w-20 sm:min-w-30 button-focus bg-gray-100 hover:bg-gray-200 focus:shadow-button text-gray-900 rounded-sm relative z-10 cursor-pointer text-center no-underline text-sm"
type="button"
onClick={() => pushModal(Components[task.modalFunction])}>
{isCompleted(task.slug) ? task.buttonTextDone : task.buttonTextToDo}
</button>
)
}