import { useState } from 'react'
import { Layout } from '@/components/layout/Layout'
import { WalletBalance } from '@/components/wallet/WalletBalance'
import { DepositModal } from '@/components/wallet/DepositModal'
import { TransactionHistory } from '@/components/wallet/TransactionHistory'
import { Button } from '@/components/common/Button'
import { Plus } from 'lucide-react'

export const Wallet = () => {
  const [isDepositModalOpen, setIsDepositModalOpen] = useState(false)

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Wallet</h1>
            <p className="text-gray-600 mt-2">Manage your funds and view transaction history</p>
          </div>
          <Button onClick={() => setIsDepositModalOpen(true)}>
            <Plus size={20} className="mr-2" />
            Deposit Funds
          </Button>
        </div>

        <WalletBalance />
        <TransactionHistory />
      </div>

      <DepositModal
        isOpen={isDepositModalOpen}
        onClose={() => setIsDepositModalOpen(false)}
      />
    </Layout>
  )
}
