import Image from "next/image";

export const TestimonialCard = ({
  id,
  name,
  title,
  body,
  img,
}: {
  id: number;
  name: string;
  title: string;
  img: string;
  body: string;
}) => {
  return (
    <div
      key={id}
      className={`group mx-auto w-[360px] max-w-[380px] rounded-xl border border-gray-300 bg-white p-6 transition-all duration-500`}
    >
      <div className={`flex items-center gap-5 pb-4`}>
        <Image
          width={64}
          height={64}
          className="h-16 w-16 rounded-full object-contain"
          src={img}
          alt="avatar"
        />
        <div className="block">
          <p className="font-switer font-medium text-black transition-all duration-500">
            {name}
          </p>
          <span className="font-mium-reg text-gray text-sm tracking-[-0.8px]">
            {title}
          </span>
        </div>
      </div>
      <div className="border-t border-solid border-gray-200 pt-4">
        <p className="text-b-4-14 text-gray font-mium-reg line-clamp-4 leading-5 font-normal tracking-[-0.6px]">
          {body}
        </p>
      </div>
    </div>
  );
};