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";

  return (
    <div className="rounded-lg min-w-full flex overflow-hidden ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
      <Link href={url}>
        <a>
          <div className="flex-1 pt-4 pb-4 pl-4">
            {" "}
            <img
              className="rounded-lg sm:w-32 w-16"
              src={finalsrc}
              alt={alt}
            />{" "}
          </div>
        </a>
      </Link>{" "}
      <div
        className={`flex items-center justify-center animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center min-h-full ${isMe}`}
      >
        <p>
          {innerText}
          <br />
          {"- "}
          <Link href={url}>
            <a
              target="_blank"
              className={`transition ${isMeLink}`}
            >{`@${user}`}</a>
          </Link>
        </p>
      </div>
    </div>
  );
}