/* eslint-disable @typescript-eslint/no-explicit-any */

import styles from "./details.module.scss";

import {
  MdPeopleAlt,
} from "react-icons/md";

import {
  FiTrendingUp,
  FiDollarSign,
  FiClock,
  FiLayers,
} from "react-icons/fi";

import currencyData from "../../../../../data/countries-currencies.json";

import { formatMoneyComplete } from "@/lib/utils/format-money";

import { usePage } from "@inertiajs/react";

const PlanDetails = ({ plan }: any) => {
  const {
    name,
    min_amount,
    max_amount,
    roi,
    duration,
    leverage,
    base_currency,
  } = plan;

  const { appSettings } =
    usePage().props as any;

  const currency =
    currencyData.find(
      (item) =>
        item.currency_code ===
        appSettings?.base_currency
    );

  return (
    <div className={styles.details}>
      <div className={styles.details__header}>
        <span>Investment Overview</span>

        <h2>
          Review plan information
        </h2>

        <p>
          Carefully review all
          investment metrics before
          proceeding.
        </p>
      </div>

      <div className={styles.details__grid}>
        <div
          className={
            styles.details__grid__card
          }
        >
          <FiLayers />

          <span>Package Name</span>

          <h5>{name}</h5>
        </div>

        <div
          className={
            styles.details__grid__card
          }
        >
          <FiDollarSign />

          <span>Minimum Deposit</span>

          <h5>
            {
              currency?.currency_symbol
            }
            {formatMoneyComplete(
              min_amount
            )}
          </h5>
        </div>

        <div
          className={
            styles.details__grid__card
          }
        >
          <FiDollarSign />

          <span>Maximum Deposit</span>

          <h5>
            {
              currency?.currency_symbol
            }
            {formatMoneyComplete(
              max_amount
            )}
          </h5>
        </div>

        <div
          className={
            styles.details__grid__card
          }
        >
          <FiTrendingUp />

          <span>Expected ROI</span>

          <h5>{roi}%</h5>
        </div>

        <div
          className={
            styles.details__grid__card
          }
        >
          <FiClock />

          <span>Duration</span>

          <h5>{duration}</h5>
        </div>

        <div
          className={
            styles.details__grid__card
          }
        >
          <FiTrendingUp />

          <span>Leverage</span>

          <h5>{leverage}</h5>
        </div>

        <div
          className={
            styles.details__grid__card
          }
        >
          <FiLayers />

          <span>Category</span>

          <h5>Crypto Assets</h5>
        </div>

        <div
          className={
            styles.details__grid__card
          }
        >
          <FiDollarSign />

          <span>Base Currency</span>

          <h5>{base_currency}</h5>
        </div>
      </div>

      <div className={styles.details__info}>
        <div
          className={styles.details__note}
        >
          <div
            className={
              styles.details__note__icon
            }
          >
            <FiTrendingUp />
          </div>

          <div>
            <h4>ROI Settlement</h4>

            <p>
              Upon successful
              completion of the
              investment period, your
              capital and accumulated
              returns will be credited
              automatically to your
              wallet.
            </p>
          </div>
        </div>

        <div
          className={
            styles.details__support
          }
        >
          <div
            className={
              styles.details__support__icon
            }
          >
            <MdPeopleAlt />
          </div>

          <div>
            <h4>
              Dedicated Support
            </h4>

            <p>
              Our dispute resolution
              and investment support
              team is available to
              assist whenever needed.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PlanDetails;