"use client";

import Image from "next/image";
import { useUserGems } from "@/features/gems/hooks/use-user-gems";
import { panelDict } from "@/features/panel/dict";
import { toPersianDigits } from "@/lib/to-english-digits";

export function DashboardGemBalance() {
  const { data: gems } = useUserGems();

  return (
    <div
      aria-label={panelDict.gems}
      className="inline-flex h-10 items-center gap-1.5 rounded-2xl bg-card px-3 text-sm font-bold text-card-foreground shadow-soft-sm"
    >
      <Image
        src="/icons/gem.jpg"
        alt=""
        width={32}
        height={32}
        className="size-8 rounded-full object-cover"
        unoptimized 
      />
      <span>{toPersianDigits(gems?.balance ?? 0)}</span>
    </div>
  );
}