import React from 'react'
import styles from './recurringPayment.module.css'
import { BsTriangleFill, BsYoutube, BsCalendar2Date } from 'react-icons/bs'
import { RiHome7Fill, RiBillLine } from 'react-icons/ri'

export default function RecurringPayment(props) {
  const renderIcon = (icon_type) => {
    const iconSize = 50

    if (icon_type == "rent") {
      return (
        <RiHome7Fill
          className={styles.paymentIcon}
          size={iconSize}
        />
      )
    } else if (icon_type == "youtube") {
      return (
        <BsYoutube
          className={styles.paymentIcon}
          size={iconSize}
        />
      )
    }
    return (
      <RiBillLine
        className={styles.paymentIcon}
        size={iconSize}
      />
    )
  }


  return (
    <div className={styles.recurringPayment}>
      <div className={styles.recurringPaymentTop}>
        <div className={styles.recurringPaymentTopLeft}>
          {renderIcon(props.icon_type)}
          <div className={styles.paymentTitle}>{props.title}</div>
        </div>
        <BsCalendar2Date
          className={styles.paymentIcon}
          size={50}
        />
      </div>
      <div className={styles.recurringPaymentBottom}>
        <div>Due in {props.due_in_days} days</div>
        <div>₹{props.amount} · {props.frequency}</div>
      </div>
    </div>
  )
}