lti-web-client/src/components/modal/ConfirmationModal.tsx

'use client';

import { RefObject } from 'react';

import { Icon } from '@iconify/react';
import Modal from '@/components/Modal';
import Button from '@/components/Button';

import { cn } from '@/lib/helper';
import { Color } from '@/types/theme';

export interface ConfirmationModalProps {
  ref: RefObject<HTMLDialogElement | null>;
  type?: 'info' | 'success' | 'error';
  text?: string;
  closeOnBackdrop?: boolean;
  primaryButton?: {
    text?: string;
    color?: Color;
    isLoading?: boolean;
    onClick?: () => void;
  };
  secondaryButton?: {
    text?: string;
    color?: Color;
    isLoading?: boolean;
    onClick?: () => void;
  };
  className?: {
    modal?: string;
    modalBox?: string;
  };
  children?: React.ReactNode;
}

const ConfirmationModal = ({
  ref,
  type = 'info',
  text,
  closeOnBackdrop,
  primaryButton,
  secondaryButton,
  className,
  children,
}: ConfirmationModalProps) => {
  const closeModalHandler = () => {
    ref.current?.close();
  };

  return (
    <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
      <div className='w-full flex flex-col gap-4'>
        <div
          className={cn(
            'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
            {
              'bg-error': type === 'error',
              'bg-info': type === 'info',
              'bg-success': type === 'success',
            }
          )}
        >
          {type === 'info' && (
            <Icon
              icon='material-symbols:info-outline-rounded'
              width={64}
              height={64}
              className='text-info-content'
            />
          )}

          {type === 'success' && (
            <Icon
              icon='qlementine-icons:success-12'
              width={64}
              height={64}
              className='text-success-content'
            />
          )}

          {type === 'error' && (
            <Icon
              icon='solar:danger-triangle-linear'
              width={64}
              height={64}
              className='text-error-content'
            />
          )}
        </div>

        <p className='text-center font-medium'>
          {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
        </p>

        {children && <div className='w-full'>{children}</div>}

        <div className='w-full flex flex-row gap-2'>
          {secondaryButton && secondaryButton.text && (
            <Button
              variant='ghost'
              color={secondaryButton?.color ?? 'none'}
              isLoading={secondaryButton?.isLoading}
              disabled={secondaryButton?.isLoading}
              onClick={closeModalHandler}
              className='grow'
            >
              {secondaryButton?.text ?? 'Tidak'}
            </Button>
          )}

          {primaryButton && primaryButton.text && (
            <Button
              color={primaryButton?.color ?? 'info'}
              onClick={primaryButton?.onClick}
              isLoading={primaryButton?.isLoading}
              disabled={primaryButton?.isLoading}
              className='grow'
            >
              {primaryButton?.text ?? 'Ya'}
            </Button>
          )}
        </div>
      </div>
    </Modal>
  );
};

export default ConfirmationModal;