import Image from "next/image";
import Link from "next/link";

export default function TestimonialCard({ src, alt, url, innerText, user }) {
  const finalsrc = Boolean(src) ? src : "/images/logo.png";
  let testimonialarray = innerText.split("\n");
  testimonialarray = testimonialarray.slice(0, testimonialarray.length - 1);
  const testimonialdict = Object.assign({}, testimonialarray);

  return (
    <div className="rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition">
      <Link href={url}>
        <a target="_blank">
          <div className="min-w-full flex overflow-hidden">
            <div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4">
              <span className="relative inline-block sm:w-32 w-16 sm:h-32 h-16">
                <Image
                  className="rounded-sm"
                  src={finalsrc}
                  layout="fill"
                  objectFit="contain"
                  alt={alt}
                />
              </span>
            </div>
            <div className="order-2 flex flex-5 p-4 items-center justify-center min-h-full">
              <div className="animate-wiggle sm:text-lg text-xs text-center">
                {Object.keys(testimonialdict).map((t) => (
                  <p className="overflow-auto" key={t}>
                    {testimonialdict[t] == "" ? <br /> : testimonialdict[t]}
                  </p>
                ))}
                {`- @${user}`}
              </div>
            </div>
          </div>
        </a>
      </Link>
    </div>
  );
}
