import { 
  PaymentInfoItemType, 
} from '../model/types';

export interface InfoItemProps {
  type?: PaymentInfoItemType;
  payName?: string;
  payImage?: string;
  infoLink?: string;
  setNoInterestInfoBottomSheetOn?: (noInterestInfoBottomSheetOn: boolean) => void;
};

export const InfoItem = ({
  type,
  payName,
  payImage,
  infoLink,
  setNoInterestInfoBottomSheetOn
}: InfoItemProps) => {

  const onClickToOpenBottomSheet = () => {
    if(setNoInterestInfoBottomSheetOn){
      setNoInterestInfoBottomSheetOn(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() }
        >수수료 및 정산주기 &gt;</button>
      </li>
    </>
  )
};