import React from 'react';
import { Card, CardContent, Typography, Box, Divider } from '@mui/material';

interface EstimatedMonthlyCostCardProps {
    price: number;
}

const EstimatedMonthlyCostCard: React.FC<EstimatedMonthlyCostCardProps> = ({ price }) => {
    const calculateMonthlyPayment = (principal: number, interestRate: number, loanTerm: number) => {
        const monthlyInterestRate = interestRate / 12;
        const numberOfPayments = loanTerm * 12;
        const numerator = principal * monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments);
        const denominator = Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1;
        return denominator !== 0 ? numerator / denominator : 0;
    };

    const downPayment = price * 0.20; // 20% down payment
    const loanAmount = price - downPayment;
    const interestRate = 0.07; // 7% annual interest rate
    const loanTerm = 30; // 30-year term
    const monthlyMortgage = calculateMonthlyPayment(loanAmount, interestRate, loanTerm);

    const monthlyPropertyTax = (price * 0.015) / 12; // 1.5% of value annually
    const monthlyInsurance = 100; // Flat estimate
    const monthlyHoa = 50; // Flat estimate

    const totalMonthlyCost = monthlyMortgage + monthlyPropertyTax + monthlyInsurance + monthlyHoa;

    return (
        <Card>
            <CardContent>
                <Typography variant="h6" gutterBottom>
                    Estimated Monthly Cost
                </Typography>
                <Box display="flex" justifyContent="space-between" mt={2}>
                    <Typography>Mortgage</Typography>
                    <Typography>${monthlyMortgage.toFixed(2)}</Typography>
                </Box>
                <Box display="flex" justifyContent="space-between">
                    <Typography>Property Tax</Typography>
                    <Typography>${monthlyPropertyTax.toFixed(2)}</Typography>
                </Box>
                <Box display="flex" justifyContent="space-between">
                    <Typography>Home Insurance</Typography>
                    <Typography>${monthlyInsurance.toFixed(2)}</Typography>
                </Box>
                <Box display="flex" justifyContent="space-between">
                    <Typography>HOA Fees</Typography>
                    <Typography>${monthlyHoa.toFixed(2)}</Typography>
                </Box>
                <Divider sx={{ my: 1 }} />
                <Box display="flex" justifyContent="space-between" sx={{ fontWeight: 'bold' }}>
                    <Typography>Total Estimate</Typography>
                    <Typography>${totalMonthlyCost.toFixed(2)}</Typography>
                </Box>
            </CardContent>
        </Card>
    );
};

export default EstimatedMonthlyCostCard;