import BorderButton from '@/Component/Common/Forms/BorderButton';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import Modal from '@/Component/Common/Modal';
import { LoaderSVG } from '@/Component/Common/SVGs/CommonSVG';

interface LinkGoogleAccountModalProps {
    modal: boolean;
    setModal: (value: boolean) => void;
    translations: Record<string, string>;
    onCancel: () => void;
    onLinkAndLogin: () => void;
    loader?: boolean;
}

const LinkGoogleAccountModal = ({
    modal,
    setModal,
    translations,
    onCancel,
    onLinkAndLogin,
    loader = false,
}: LinkGoogleAccountModalProps) => (
    <Modal modalSize="md:w-2/4 lg:w-1/3 xl:w-96 2xl:w-[26rem]" modal={modal} setModal={setModal}>
        <div className="text-center py-2">
            <h3 className="mb-3 text-xl font-semibold text-neutral-900">
                {translations?.accountAlreadyExists}
            </h3>
            <p className="mb-6 text-sm text-neutral-600">
                {translations?.linkGoogleAccountMessage}
            </p>
            <div className="flex justify-center gap-2">
                <BorderButton customClass="w-full max-w-40" onClick={onCancel} disabled={loader}>
                    {translations?.cancel}
                </BorderButton>
                <PrimaryButton
                    customClass="flex items-center justify-center w-full max-w-40"
                    disabled={loader}
                    onClick={onLinkAndLogin}
                >
                    {translations?.linkAndLogIn}
                    {loader && <LoaderSVG customClass="ml-2.5" />}
                </PrimaryButton>
            </div>
        </div>
    </Modal>
);

export default LinkGoogleAccountModal;