import Image, { StaticImageData } from "next/image";
import RatingStar from '../../../../public/images/review-star.svg';

//white cta link with white arrow icon
interface TestimonialCardProps {
    heading: string;
    description: string;
    authorName: string;
    authorImage: StaticImageData;
    className?: string;

}

export default function TestimonialCard({ heading, description, authorImage, authorName, className }: TestimonialCardProps) {
    return (
        <div className={`${className} rounded-[16px] border border-[#CCD2DC] bg-white shadow-[0_4px_40px_0_rgba(0,0,0,0.04)] p-6`}>
            <figure className="mb-6">
                <Image
                    src={RatingStar}
                    alt="Rating Star"
                    width={80}
                    height={16}
                />
            </figure>
            <h5 className="text-[20px] text-[#1718FF] font-bold mb-1">{heading}</h5>
            <p className="text-[18px] md:text-[20px] text-[#00204F] font-medium mb-12 md:mb-[92px]">{description}</p>
            <div className="flex items-center">
                <Image
                    src={authorImage}
                    width={64}
                    height={64}
                    alt="author image"
                    className="rounded-full"
                />
                <div className="flex-1 ml-3">
                    <span className="text-[#334D72] text-[16px] font-bold">{authorName}</span>
                </div>
            </div>
        </div>
    );
}