import React from 'react'
import styles from './singleTnx.module.css'
import { MdFastfood, MdOutlineLocalGroceryStore } from 'react-icons/md';
import { BiDrink } from 'react-icons/bi';
import { GiKnifeFork } from 'react-icons/gi';
import { FaCarAlt } from 'react-icons/fa';
import { SiSwiggy, SiNetflix } from 'react-icons/si';

export default function SingleTransaction(props) {
  const renderIcon = (icon_type) => {
    if (icon_type == "drink") {
      return (
        <BiDrink
          className={styles.icon}
          size={28}
        />
      )
    } else if (icon_type == "groceries") {
      return (
        <MdOutlineLocalGroceryStore
          className={styles.icon}
          size={28}
        />
      )
    } else if (icon_type == "food") {
      return (
        <GiKnifeFork
          className={styles.icon}
          size={28}
        />
      )
    } else if (icon_type == "transport") {
      return (
        <FaCarAlt
          className={styles.icon}
          size={28}
        />
      )
    } else if (icon_type == "swiggy") {
      return (
        <SiSwiggy
          className={styles.icon}
          size={28}
        />
      )
    } else if (icon_type == "netflix") {
      return (
        <SiNetflix
          className={styles.icon}
          size={28}
        />
      )
    }
  }

  return (
    <div className={styles.tnx}>
      <div className={styles.tnxHeading}>
        <div className={styles.tnxTitle}>{props.title}</div>
        <div className={styles.date}>{props.datetime}</div>
      </div>
      <div className={styles.tnxInfo}>
        <div className={styles.cost}>
          <div className={styles.minus}>-</div>
          <div className={styles.rupee}>₹</div>
          <div className={styles.amount}>{props.amount}</div>
        </div>
        <div className={styles.tag}>
          {renderIcon(props.icon_type)}
          {props.tag}
        </div>
      </div>
    </div>
  )
}