'use client'

import React from 'react'
import styles from './todos.module.scss'
import Todo from '../Todo'
import PageIntro from '../PageIntro'

// ✅ Icons
import { FaPiggyBank, FaUser } from 'react-icons/fa6'
import { IoWallet } from 'react-icons/io5'
import { MdAppsOutage } from 'react-icons/md'
import { RiSecurePaymentLine } from 'react-icons/ri'
import { FaCubes } from 'react-icons/fa6'


const Todos: React.FC = () => {
  // const [modal, setModal] = useState<number>(0)

  return (
    <>
      {/* {modal === 1 ? <AddSavings /> : null} */}

      <div className={styles['todos']}>
        <PageIntro
          title="Quick Help"
          description="Seamlessly and easily explore your dashboard. It was designed with you in mind."
        />

        <div className={styles['todos__todos']}>
          <Todo path="deposits" icon={<FaPiggyBank size="1.2rem" />} label="Deposit" />
          <Todo path="withdrawals" icon={<IoWallet size="1.2rem" />} label="Withdraw" />
          <Todo path="kyc" icon={<FaUser size="1.2rem" />} label="KYC" />
          <Todo path="plans" icon={<MdAppsOutage size="1.2rem" />} label="Plans" />
          {/* <Todo path="assets-trading" icon={<TbChartCandleFilled size="1.2rem" />} label="Trade Assets" /> */}
          <Todo path="signals" icon={<FaCubes size="1.2rem" />} label="Signals" />
          <Todo path="wallet" icon={<RiSecurePaymentLine size="1.2rem" />} label="Transactions" />
        </div>
      </div>
    </>
  )
}

export default Todos