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

export default function SupportButton({ title, alt, src, url }) {
  const emptyTitle = title ? true : false;
  if (emptyTitle) {
    return (
      <div className="w-full justify-center flex">
        <Link href={url}>
          <a target="_blank">
            <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-alice-werefox-grey dark:ring-alice-werefox-grey-darker text-lg text-center text-alice-werefox-grey-darker dark:text-alice-werefox-grey-lightest bg-alice-werefox-red dark:bg-alice-werefox-red-dark transition hover:bg-alice-werefox-red-light dark:hover:bg-alice-werefox-red-darker">
              <span className="inline-block h-6">
                <img alt={alt} src={src} className="inline-block h-6"></img>
              </span>{" "}
              {title}
            </p>
          </a>
        </Link>
      </div>
    );
  } else {
    return (
      <div className="w-full justify-center flex">
        <Link href={url}>
          <a
            target="_blank"
            className="rounded-lg ring-2 ring-alice-werefox-grey dark:ring-alice-werefox-grey-darker"
          >
            <img
              alt={alt}
              src={src}
              className="inline-flex h-10 filter transition hover:brightness-125"
            />
          </a>
        </Link>
      </div>
    );
  }
}
