import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button";

export default function LedgerApp() { const [transactions, setTransactions] = useState([]); const [description, setDescription] = useState(""); const [amount, setAmount] = useState("");

const addTransaction = (type) => { if (!description || isNaN(parseFloat(amount))) return; const newTransaction = { id: Date.now(), description, amount: parseFloat(amount) * (type === "debit" ? -1 : 1), type, }; setTransactions([newTransaction, ...transactions]); setDescription(""); setAmount(""); };

const balance = transactions.reduce((acc, t) => acc + t.amount, 0);

return ( <div className="max-w-xl mx-auto p-4 space-y-6"> <h1 className="text-2xl font-bold text-center">Ledger App</h1>

<Card>
    <CardContent className="p-4 space-y-4">
      <div className="flex flex-col gap-2">
        <Input
          placeholder="Description"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
        <Input
          placeholder="Amount"
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />
      </div>
      <div className="flex gap-2">
        <Button onClick={() => addTransaction("credit")} className="bg-green-500 hover:bg-green-600">Credit</Button>
        <Button onClick={() => addTransaction("debit")} className="bg-red-500 hover:bg-red-600">Debit</Button>
      </div>
    </CardContent>
  </Card>

  <div className="text-center text-xl font-semibold">
    Balance: ${balance.toFixed(2)}
  </div>

  <div className="space-y-2">
    {transactions.map((t) => (
      <Card key={t.id}>
        <CardContent className="p-4 flex justify-between">
          <span>{t.description}</span>
          <span
            className={
              t.amount >= 0 ? "text-green-600" : "text-red-600"
            }
          >
            {t.amount >= 0 ? "+" : "-"}${Math.abs(t.amount).toFixed(2)}
          </span>
        </CardContent>
      </Card>
    ))}
  </div>
</div>

); }