"use client";
import React from 'react';

interface ReviewCardProps {
  loanAmount: number | null;
  interest: number | null;
  totalAmountDue: number | null;
  dueDate: string | "";
  dueAmount: number | "";
  monthlyRepayment: number | null;
  installments: number | null;
  duration: number | null;
}

const ReviewCard: React.FC<ReviewCardProps> = ({
  loanAmount,
  interest,
  totalAmountDue,
  dueDate,
  dueAmount,
  monthlyRepayment,
  installments,
  duration,
}) => {
  return (
    <div className="bg-[#F5F5F599] rounded-3xl shadow-sm p-6 sm:p-8 h-fit lg:sticky lg:top-8 border">
      <h2 className="text-xl font-semibold text-gray-900 text-center mb-4">Review</h2>

      <div className="text-center mb-6">
        <p className="text-4xl font-bold text-gray-900 mb-2">N{totalAmountDue?.toLocaleString()}</p>
        <p className="text-sm text-gray-600 mb-1">by {dueDate}</p>
        <p className="text-sm text-purple-700 flex items-center justify-center gap-1">
          <span className="w-2 h-2 bg-purple-700 rounded-full"></span>
          {installments} installments for {duration} days
        </p>
      </div>

      <div className="space-y-4 border-t border-gray-200 pt-6">
        <div className="flex justify-between items-center">
          <span className="text-gray-600 text-sm">LOAN AMOUNT</span>
          <span className="text-gray-900 font-medium">N{loanAmount?.toLocaleString()}.00</span>
        </div>
        <div className="flex justify-between items-center">
          <span className="text-gray-600 text-sm">INTEREST</span>
          <span className="text-gray-900 font-medium">N{interest?.toLocaleString()}.00</span>
        </div>
        <div className="flex justify-between items-center pb-4 border-b border-gray-200">
          <span className="text-gray-600 text-sm">TOTAL AMOUNT DUE</span>
          <span className="text-gray-900 font-semibold">N{totalAmountDue?.toLocaleString()}.00</span>
        </div>
        <div className="flex justify-between items-center pt-2">
          <span className="text-gray-600 text-sm">1/{installments} DUE DATE</span>
          <span className="text-gray-900 font-medium">{dueDate}</span>
        </div>
        <div className="flex justify-between items-center">
          <span className="text-gray-600 text-sm">MONTHLY REPAYMENT</span>
          <span className="text-gray-900 font-medium">N{monthlyRepayment?.toLocaleString()}.00</span>
        </div>
      </div>
    </div>
  );
};

export default ReviewCard;