'use client'

import React from 'react'
import { useAuth } from '@/contexts/AuthContext'
import { Badge } from '@/components/ui/badge'
import { Wallet } from 'lucide-react'

interface BalanceDisplayProps {
  variant?: 'default' | 'compact' | 'badge'
  showIcon?: boolean
  className?: string
}

export function BalanceDisplay({
  variant = 'default',
  showIcon = true,
  className = '',
}: BalanceDisplayProps) {
  const { user } = useAuth()

  if (!user) return null

  const balance = user.balance || 0

  const formatBalance = (amount: number) => {
    return new Intl.NumberFormat('en-IN', {
      style: 'currency',
      currency: 'INR',
      minimumFractionDigits: 0,
      maximumFractionDigits: 2,
    }).format(amount)
  }

  if (variant === 'badge') {
    return (
      <Badge variant="secondary" className={`${className}`}>
        {showIcon && <Wallet className="h-3 w-3 mr-1" />}
        {formatBalance(balance)}
      </Badge>
    )
  }

  if (variant === 'compact') {
    return (
      <div className={`flex items-center space-x-1 text-sm ${className}`}>
        {showIcon && <Wallet className="h-4 w-4 text-muted-foreground" />}
        <span className="font-medium">{formatBalance(balance)}</span>
      </div>
    )
  }

  return (
    <div className={`flex items-center space-x-2 ${className}`}>
      {showIcon && <Wallet className="h-5 w-5 text-muted-foreground" />}
      <div>
        <div className="text-lg font-semibold">{formatBalance(balance)}</div>
        {/* <div className="text-xs text-muted-foreground">Balance</div> */}
      </div>
    </div>
  )
}