'use client'
import Modal from "@/Component/Common/Modal";
import BorderButton from "@/Component/Common/Forms/BorderButton";
import GradientButton from "@/Component/Common/Forms/GradientButton";

type PublishWarningType = 'profile' | 'banner';

type PublishCampaignWarningModalProps = {
    type: PublishWarningType;
    setModal: (value: null) => void;
    translations: Record<string, string>;
    onPublishAnyway: () => void;
    onPrimaryAction: () => void;
};

const PublishCampaignWarningModal = (props: PublishCampaignWarningModalProps) => {
    const { type, setModal, translations, onPublishAnyway, onPrimaryAction } = props;

    const isProfileWarning = type === 'profile';

    return (
        <Modal modalSize="md:w-2/4 lg:w-1/3 xl:w-[28rem]" modal={true} setModal={setModal}>
            <div className="text-center py-2">
                <h2 className="text-xl md:text-2xl font-bold mb-4 text-neutral-900">
                    {isProfileWarning ? translations?.completeYourProfile : translations?.missingCampaignBanner}
                </h2>
                <p className="text-start mb-8 text-sm md:text-base text-neutral-700">
                    {isProfileWarning ? translations?.completeYourProfileMessage : translations?.missingCampaignBannerMessage}
                </p>
                <div className="flex justify-center gap-3">
                    <BorderButton
                        customClass="flex-1 max-w-44"
                        buttonType="button"
                        title={translations?.publishAnyway}
                        onClick={onPublishAnyway}
                    />
                    <GradientButton
                        customClass="flex-1 max-w-44"
                        buttonType="button"
                        title={isProfileWarning ? translations?.completeProfile : translations?.addBanner}
                        onClick={onPrimaryAction}
                    />
                </div>
            </div>
        </Modal>
    );
};

export default PublishCampaignWarningModal;