tt

bbb

// Add Shortcode
function custom_shortcode() {

	'use client'
	
	import { useState, useEffect } from 'react'
	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
	import { Input } from "@/components/ui/input"
	import { Label } from "@/components/ui/label"
	import { Slider } from "@/components/ui/slider"
	import { Button } from "@/components/ui/button"
	
	export default function CreditCaresLoanCalculator() {
	  const [loanAmount, setLoanAmount] = useState(100000)
	  const [interestRate, setInterestRate] = useState(10)
	  const [loanTerm, setLoanTerm] = useState(12)
	  const [emi, setEMI] = useState(0)
	  const [totalInterest, setTotalInterest] = useState(0)
	  const [totalAmount, setTotalAmount] = useState(0)
	
	  useEffect(() => {
	    const calculateLoan = () => {
	      const principal = loanAmount
	      const rate = interestRate / 12 / 100
	      const time = loanTerm
	
	      const emiValue = principal * rate * (Math.pow(1 + rate, time) / (Math.pow(1 + rate, time) - 1))
	      const totalAmountValue = emiValue * time
	      const totalInterestValue = totalAmountValue - principal
	
	      setEMI(emiValue)
	      setTotalAmount(totalAmountValue)
	      setTotalInterest(totalInterestValue)
	    }
	
	    calculateLoan()
	  }, [loanAmount, interestRate, loanTerm])
	
	  return (
	    <Card className="w-full max-w-lg mx-auto bg-white text-[#025590] rounded-[10px] overflow-hidden">
	      <CardHeader className="bg-[#025590] text-white">
	        <CardTitle className="text-2xl md:text-3xl">CreditCares Loan Calculator</CardTitle>
	        <CardDescription className="text-gray-200">Calculate your EMI and total interest</CardDescription>
	      </CardHeader>
	      <CardContent className="space-y-6 pt-6">
	        <div className="space-y-2">
	          <Label htmlFor="loanAmount">Loan Amount (₹)</Label>
	          <div className="flex items-center space-x-4">
	            <Slider
	              id="loanAmount"
	              min={10000}
	              max={10000000}
	              step={10000}
	              value={[loanAmount]}
	              onValueChange={(value) => setLoanAmount(value[0])}
	              className="flex-grow"
	              style={{ '--slider-thumb-bg': '#025590', '--slider-track-bg': '#025590', '--slider-track-active': '#025590' } as React.CSSProperties}
	            />
	            <Input
	              type="number"
	              id="loanAmount-input"
	              value={loanAmount}
	              onChange={(e) => setLoanAmount(Number(e.target.value))}
	              className="w-24 md:w-28"
	            />
	          </div>
	        </div>
	        <div className="space-y-2">
	          <Label htmlFor="interestRate">Interest Rate (%)</Label>
	          <div className="flex items-center space-x-4">
	            <Slider
	              id="interestRate"
	              min={1}
	              max={30}
	              step={0.1}
	              value={[interestRate]}
	              onValueChange={(value) => setInterestRate(value[0])}
	              className="flex-grow"
	              style={{ '--slider-thumb-bg': '#025590', '--slider-track-bg': '#025590', '--slider-track-active': '#025590' } as React.CSSProperties}
	            />
	            <Input
	              type="number"
	              id="interestRate-input"
	              value={interestRate}
	              onChange={(e) => setInterestRate(Number(e.target.value))}
	              className="w-20 md:w-24"
	            />
	          </div>
	        </div>
	        <div className="space-y-2">
	          <Label htmlFor="loanTerm">Loan Term (months)</Label>
	          <div className="flex items-center space-x-4">
	            <Slider
	              id="loanTerm"
	              min={1}
	              max={360}
	              step={1}
	              value={[loanTerm]}
	              onValueChange={(value) => setLoanTerm(value[0])}
	              className="flex-grow"
	              style={{ '--slider-thumb-bg': '#025590', '--slider-track-bg': '#025590', '--slider-track-active': '#025590' } as React.CSSProperties}
	            />
	            <Input
	              type="number"
	              id="loanTerm-input"
	              value={loanTerm}
	              onChange={(e) => setLoanTerm(Number(e.target.value))}
	              className="w-20 md:w-24"
	            />
	          </div>
	        </div>
	      </CardContent>
	      <CardFooter className="flex-col items-start space-y-4 bg-gray-50 rounded-b-[10px]">
	        <div className="w-full space-y-2">
	          <h3 className="text-lg font-semibold">Loan Summary:</h3>
	          <div className="grid grid-cols-2 gap-2 text-sm md:text-base">
	            <p>Monthly EMI:</p>
	            <p className="font-semibold">₹ {emi.toFixed(2)}</p>
	            <p>Total Interest:</p>
	            <p className="font-semibold">₹ {totalInterest.toFixed(2)}</p>
	            <p>Total Amount:</p>
	            <p className="font-semibold">₹ {totalAmount.toFixed(2)}</p>
	          </div>
	        </div>
	        <Button className="w-full bg-[#025590] hover:bg-[#025590]/90 text-white">
	          Apply Now
	        </Button>
	      </CardFooter>
	    </Card>
	  )
	}

}
add_shortcode( '', 'custom_shortcode' );