import Model from '@/components/common/Model'
import { useRouter, useSearchParams } from 'next/navigation';
import React from 'react'
import { getTranslation } from '../../../i18n';

const DeleteModel = ({ name, title, handleRemove, isLoading, description }: { name: string, title: string, handleRemove: any, isLoading: boolean, description: string }) => {
    const { t }: any = getTranslation();
    const router = useRouter();
    const searchParams = useSearchParams();
    const openDeleteModel = searchParams.get("openDeleteModel") ?? "false"

    return (
        <Model
            title={title}
            open={openDeleteModel == "true"}
            setOpen={(open) => { 
                router.back();
            }}

        >
            <form>
                <h3 className="font-boold my-3">
                    {description} <span className="italic font-bold text-red-700 px-1">{name}</span>
                </h3>
                <button onClick={handleRemove} type="button" className="btn btn-danger w-full mt-6">
                    {isLoading ? (
                        <div className="flex gap-x-2 items-center">
                            <span>{t("removing")} </span>
                            <span className="inline-block h-3 w-3 animate-ping rounded-full bg-white ltr:mr-4 rtl:ml-4"></span>
                        </div>
                    ) : (
                        t("remove")
                    )}
                </button>
            </form>
        </Model>
    )
}

export default DeleteModel