import React from 'react';

interface ReviewCardProps {
  goalName: string;
  budget: number;
  amount: number;
  timeline: string;
  savingSchedule: number;
  interest: number;
  totalAtMaturity: number;
  installments: number;
  duration: number;
  frequency: string;
}

export const ReviewCard: React.FC<ReviewCardProps> = ({
  goalName,
  budget,
  amount,
  timeline,
  savingSchedule,
  interest,
  totalAtMaturity,
  installments,
  duration,
  frequency,
}) => {
  return (
    <div className="bg-[#F5F5F5] rounded-3xl shadow-sm p-6 sm:p-8 h-fit lg:sticky lg:top-8 border w-[85%]">
      <h2 className="text-xl font-semibold text-gray-900 text-center mb-4">Review</h2>

      <div className="text-center mb-6">
        <p className="text-2xl font-bold text-gray-900 mb-2">N{totalAtMaturity.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</p>
        <p className="text-sm text-gray-600 mb-1">by {timeline}</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} {frequency.toLowerCase()} installments for {duration} days
        </p>
      </div>

      <div className="space-y-4 border-t border-gray-100 pt-6">
        <div className="flex justify-between items-center">
          <span className="text-gray-600 text-sm">GOAL NAME</span>
          <span className="text-gray-900 font-medium">{goalName}</span>
        </div>

        <div className="flex justify-between items-center">
          <span className="text-gray-600 text-sm">BUDGET</span>
          <span className="text-gray-900 font-medium">N{budget.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
        </div>

        <div className="flex justify-between items-center border-b border-gray-100">
          <span className="text-gray-600 text-sm">TIMELINE</span>
          <span className="text-gray-900 font-semibold">{timeline}</span>
        </div>

        <hr className="my-4"/>

        <div className="flex justify-between items-center">
          <span className="text-gray-600 text-sm">AMOUNT</span>
          <span className="text-gray-900 font-medium">N{amount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
        </div>

        <div className="flex justify-between items-center">
          <span className="text-gray-600 text-sm">SAVING SCHEDULE</span>
          <span className="text-gray-900 font-medium">{frequency}</span>
        </div>

        <div className="flex justify-between items-center pb-4 border-b border-gray-100">
          <span className="text-gray-600 text-sm">INTEREST</span>
          <span className="text-gray-900 font-semibold">N{interest.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
        </div>
      </div>
    </div>
  );
};