'use client';

import React from 'react';
import Button from '../Button';

interface InvestmentCardProps {
  title: string;
  description: string;
  amount: string;
  duration: string;
  interest: string;
  total: string;
  position: 'first' | 'middle' | 'last';
  onGetStarted: () => void;
}

const InvestmentCard = ({
  title,
  description,
  amount,
  duration,
  interest,
  total,
  position,
  onGetStarted,
}: InvestmentCardProps) => {
  const roundedClass = position === 'first' 
    ? 'rounded-l-3xl' 
    : position === 'last' 
    ? 'rounded-r-3xl' 
    : '';

  return (
    <div className={`flex flex-col justify-between border border-gray-200 bg-[#F5F5F566] shadow-sm ${roundedClass}`}>
      <div className="p-8">
        <h3 className="text-lg font-semibold text-gray-800">{title}</h3>
        <p className="text-sm text-gray-500">{description}</p>

        <p className="mt-4 text-2xl font-bold text-gray-900">{amount}</p>
        <p className="text-sm text-gray-500 mb-6">{duration}</p> 

        <Button
          type="button"
          border="border border-white"
          width="50%"
          onClick={onGetStarted}
            >
            <h4 className="text-xs sm:text-sm md:text-base">Get Started</h4>
        </Button>
      </div>

      <div className="p-6 border-t border-gray-200 py-16 text-sm text-gray-600">
        <p className="p-2">{interest}</p>
        <p className="p-2">{duration === "6 months" ? "12 Months" : duration}</p>
        <p className="font-semibold text-gray-900 p-2">{total}</p>
      </div>
    </div>
  );
}

export default InvestmentCard;