"use client";

import React from "react";
import styles from "./members-todos.module.scss";
import MembersPageIntro from "../members-page-intro";
import { Link } from "@inertiajs/react";

import { IoWallet } from "react-icons/io5";
import { FaHandsHelping } from "react-icons/fa";
import { BiChurch } from "react-icons/bi";
import { FiCalendar } from "react-icons/fi";
import { IoSettingsSharp } from "react-icons/io5";
import { GrAnnounce } from "react-icons/gr";

/* 🔥 NEW ICONS */
import { MdStorefront } from "react-icons/md";

const MembersTodos = () => {
  const actions = [
    {
      label: "My Wallet",
      icon: <IoWallet />,
      href: "/member/givings",
    },
    {
      label: "Projects",
      icon: <FaHandsHelping />,
      href: "/member/projects",
    },
    {
      label: "Businesses",
      icon: <MdStorefront />,
      href: "/member/businesses",
    },
    {
      label: "Home Cell",
      icon: <BiChurch />,
      href: "/member/home-cell",
    },
    {
      label: "Programs",
      icon: <FiCalendar />,
      href: "/member/events",
    },
    {
      label: "Updates",
      icon: <GrAnnounce />,
      href: "/member/announcements",
    },
    {
      label: "Settings",
      icon: <IoSettingsSharp />,
      href: "/member/settings",
    },
  ];

  return (
    <div className={styles.todos}>
      <div className={styles.header}>
        <MembersPageIntro
          title="Quick Actions"
          description="Get to what matters faster"
        />
      </div>

      <div className={styles.grid}>
        {actions.map((item, index) => (
          <Link key={index} href={item.href} className={styles.item}>
            <div className={styles.icon}>{item.icon}</div>
            <span>{item.label}</span>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default MembersTodos;