import { PaymentCancelIcon, PaymentCheckedIcon } from '@/public/Icon';
import clsx from 'clsx';
import { useState } from 'react';
import style from './index.module.scss';

interface PaymentTabProps {
  image?: string;
  title?: string;
  onClick?: () => void;
  isShowCancelButton?: boolean;
  isCheckedFunctionality?: boolean;

  handleRemove?: () => void;
}

const PaymentTab = ({
  image,
  title,
  onClick,
  isShowCancelButton = true,
  isCheckedFunctionality,
  handleRemove,
}: PaymentTabProps) => {
  const [isChecked, setChecked] = useState<boolean>(false);

  const handleClick = () => {
    if (isCheckedFunctionality) {
      if (onClick) {
        onClick();
      }
    } else {
      setChecked((prevChecked) => !prevChecked);
    }
  };

  return (
    <div
      onClick={handleClick}
      className={`${style.paymentItemCard} cursor-pointer d-flex justify-content-start align-items-center gap-2`}
    >
      <img src={image} alt={title || 'Payment option'} />
      <h5 className="mb-0 fs-5 fw-bolder">{title}</h5>

      {isShowCancelButton && !isCheckedFunctionality && (
        <div className={clsx(style.paymentIcon, { [style.active]: isChecked })}>
          <PaymentCheckedIcon />
        </div>
      )}

      {!isShowCancelButton && (
        <div
          onClick={handleRemove}
          className={clsx(style.paymentIcon, {
            [style.active]: !isShowCancelButton,
          })}
        >
          <PaymentCancelIcon />
        </div>
      )}
    </div>
  );
};

export default PaymentTab;