import { useState } from 'react' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "/components/ui/card" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" export default function LoanCalculator() { const [loanAmount, setLoanAmount] = useState('100000') const [interestRate, setInterestRate] = useState('5.0') const [loanTerm, setLoanTerm] = useState('30') const [monthlyPayment, setMonthlyPayment] = useState('') const calculatePayment = () => { const principal = parseFloat(loanAmount) const annualRate = parseFloat(interestRate) / 100 const monthlyRate = annualRate / 12 const payments = parseFloat(loanTerm) * 12 if (principal && monthlyRate && payments) { const x = Math.pow(1 + monthlyRate, payments) const monthly = (principal * x * monthlyRate) / (x - 1) setMonthlyPayment(monthly.toFixed(2)) } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() calculatePayment() } const handleReset = () => { setLoanAmount('100000') setInterestRate('5.0') setLoanTerm('30') setMonthlyPayment('') } return ( Loan Calculator Calculate your monthly mortgage payments {monthlyPayment && (

Monthly Payment

${monthlyPayment}

Based on {loanTerm} year{loanTerm !== '1' ? 's' : ''} at {interestRate}% interest

)} ) }