import { useTranslation } from 'react-i18next';
import {
  PaymentInfoItemType,
} from '../model/types';

export interface InfoItemProps {
  type?: PaymentInfoItemType;
  payName?: string;
  payImage?: string;
  infoLink?: string;
  payType?: number;
  setPayType?: (payType: number) => void;
  setBottomSheetOn?: (bottomSheetOn: boolean) => void;
};

export const InfoItem = ({
  type,
  payName,
  payImage,
  infoLink,
  payType,
  setPayType,
  setBottomSheetOn
}: InfoItemProps) => {
  const { t } = useTranslation();

  const onClickToOpenBottomSheet = () => {
    if(setPayType && payType){
      setPayType(payType);
    }
    if(setBottomSheetOn){
      setBottomSheetOn(true);
    }
  };
  return (
    <>
      <li className="ing-card">
        <div className="ing-card-head">
          <div className="ing-card-icon">
            <img 
              src={ payImage }
              alt={ payName }
            />
          </div>
          <span className="ing-card-name">{ payName }</span>
        </div>
        <button
          className="ing-card-link"
          type="button"
          onClick={ () => onClickToOpenBottomSheet() }
        >{t('payment.commissionAndSettlement')} &gt;</button>
      </li>
    </>
  )
};