'use client';

import { formatPriceWithToman } from '@/lib/utils/priceUtils';
import { LogOutIcon, PlusIcon } from 'lucide-react';

const WalletBlancCard = () => {
    return (
        <div
            className="
        w-full min-h-12 rounded-2xl my-6 py-6 px-6
        flex flex-col justify-start
        bg-gradient-to-l from-primary to-primary-action
        shadow-[0_12px_24px] shadow-primary/25
        border border-primary/25
      "
        >
            <h4 className="text-sm font-medium text-gray-300">
                موجودی کیف پول
            </h4>
            <h1 className="text-2xl font-bold my-4 text-primary-foreground">
                {formatPriceWithToman(35000000)}
            </h1>

            <div className="flex w-full gap-4">
                <button
                    className="
            w-full bg-white h-12 rounded-xl cursor-pointer
            flex items-center justify-center gap-2
          "
                    onClick={() => alert('latter...')}
                >
                    <PlusIcon className="text-primary-action size-4" />
                    <span className="text-primary-action">شارژ کیف پول</span>
                </button>

                <button
                    className="
            w-full h-12 rounded-xl cursor-pointer
            flex items-center justify-center gap-2
            border border-primary-foreground
          "
                    onClick={() => alert('latter...')}
                >
                    <LogOutIcon className="text-primary-foreground size-4 -rotate-90" />
                    <span className="text-primary-foreground">برداشت</span>
                </button>
            </div>
        </div>
    );
};

export default WalletBlancCard;