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";
  const isMe =
    user == "Shadow8t4"
      ? "text-werefox-blue-dark dark:text-werefox-blue"
      : "text-werefox-pink-dark dark:text-werefox-pink";
  const isMeLink =
    user == "Shadow8t4"
      ? "hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
      : "hover:text-werefox-blue-dark dark:hover:text-werefox-blue";
  let testimonialarray = innerText.split("\n");
  testimonialarray = testimonialarray.slice(0, testimonialarray.length - 1);
  const testimonialdict = Object.assign({}, testimonialarray);

  return (
    <div className="min-w-full flex overflow-hidden ring-2 ring-werefox-pink-dark dark:ring-werefox-pink transition">
      <div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4">
        <Link href={url}>
          <a>
            {" "}
            <span className="relative inline-block rounded-lg sm:w-32 w-16 sm:h-32 h-16">
              <Image
                src={finalsrc}
                layout="fill"
                objectFit="contain"
                alt={alt}
              />
            </span>{" "}
          </a>
        </Link>
      </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 ${isMe}`}
        >
          {Object.keys(testimonialdict).map((t) => (
            <p className="overflow-auto" key={t}>
              {testimonialdict[t] == "" ? <br /> : testimonialdict[t]}
            </p>
          ))}
          <p>
            {"- "}
            <Link href={url}>
              <a
                target="_blank"
                className={`transition ${isMeLink}`}
              >{`@${user}`}</a>
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}