"use client";

import { FaCoins } from "react-icons/fa6";

import styles from "./sidebar-wallet-card.module.css";

export interface SidebarWalletCardProps {
  creditBalance: number;
  dailyFreeChatLimit?: number;
  dailyFreeChatRemaining?: number;
  dailyFreePrivateLimit?: number;
  dailyFreePrivateRemaining?: number;
  onActivateVip?: () => void;
  onTopUp: () => void;
  onRulesClick: () => void;
}

const formatCoins = (value: number): string =>
  new Intl.NumberFormat("en-US").format(Math.max(0, Math.trunc(value)));

export function SidebarWalletCard({
  creditBalance,
  dailyFreeChatLimit = 0,
  dailyFreeChatRemaining = 0,
  dailyFreePrivateLimit = 0,
  dailyFreePrivateRemaining = 0,
  onActivateVip,
  onTopUp,
  onRulesClick,
}: SidebarWalletCardProps) {
  return (
    <section className={styles.card} aria-label="My wallet">
      <div className={styles.leftColumn}>
        <div className={styles.titleRow}>
          <span className={styles.iconWrap} aria-hidden="true">
            <FaCoins size={18} />
          </span>
          <h2 className={styles.title}>My Wallet</h2>
        </div>

        <p className={styles.balance}>
          <span className={styles.balanceValue}>{formatCoins(creditBalance)}</span>
          <span className={styles.balanceUnit}> coins</span>
        </p>

        <button
          type="button"
          className={styles.rulesButton}
          onClick={onRulesClick}
        >
          Coin Usage Rules
        </button>
      </div>

      <div className={styles.actionColumn}>
        {onActivateVip ? (
          <button
            type="button"
            className={styles.activateButton}
            onClick={onActivateVip}
          >
            Activate VIP
          </button>
        ) : null}
        <button type="button" className={styles.topUpButton} onClick={onTopUp}>
          Top Up
        </button>
      </div>

      <div className={styles.freeAllowance} aria-label="Free allowance">
        <p className={styles.freeAllowanceTitle}>Free Allowance</p>
        <div className={styles.freeAllowanceContent}>
          <div className={styles.freeAllowanceItems}>
            <span className={styles.freeAllowanceItem}>
              <strong>{dailyFreeChatRemaining}</strong>
              <span> chats left</span>
            </span>
            <span className={styles.freeAllowanceItem}>
              <strong>{dailyFreePrivateRemaining}</strong>
              <span> private left</span>
            </span>
          </div>
          <p className={styles.dailyFreeLimit}>
            Daily free: {dailyFreeChatLimit} chats / {dailyFreePrivateLimit} private
          </p>
        </div>
      </div>
    </section>
  );
}