import Image from "next/image"; import React from "react"; interface TestimonialCard { avatar: string; name: string; role?: string; testimonial: string; rating: number; } const TestimonialCard = ({ avatar, name, role, testimonial, rating }: TestimonialCard) => { return ( <li className="inline-block w-full"> <div className="bg-primary/10 dark:bg-[#1c1c1c] mx-auto mb-5 flex w-full cursor-default flex-col gap-4 rounded-2xl px-[30px] py-6 shadow-md transition-all hover:scale-[103%]"> <div className="flex flex-row items-center gap-3"> <div> <Image src={`/testimonials/${avatar}.webp`} alt="avatar1" width={40} height={40} className="rounded-full" /> </div> <div className="space-y-1"> <div className="flex items-center gap-1"> <div className="small-semibold dark:text-white">{name}</div> </div> <div className="text-sm text-muted-foreground">{role}</div> </div> </div> <p className="body-regular dark:text-white">{testimonial}</p> <div className="hue-rotate-90 text-lg"> {/* <Image src="/testimonials/stars.svg" alt="star" width={120} height={120} className="object-cover" /> */} {"⭐".repeat(rating)} </div> </div> </li> ); }; export default TestimonialCard;