import Link from "next/link";

export default function TestimonialCard({ question, answer, src, alt }) {
  const finalsrc = Boolean(src) ? src : "/images/logo.png";

  return (
    <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
      <div className="p-2 space-y-2">
        <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
          <p className="p-8 text-center text-lg sm:text-xl text-werefox-pink-dark dark:text-werefox-pink">
            {question}
          </p>
        </div>
        <div className="p-2 flex space-y-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
          <Link href="https://vulpine.club/@shadow8t4">
            <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 text-werefox-blue-dark dark:text-werefox-blue">
            <p>
              {answer}
              <br />
              {"- "}
              <Link href="https://vulpine.club/@shadow8t4">
                <a
                  target="_blank"
                  className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
                >{`@shadow8t4`}</a>
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}