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} target="blank">
          <div 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}
          </div>
        </Link>
      </div>
    );
  } else {
    return (
      <div className="w-full justify-center flex">
        <Link href={url}>
          <div 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"
            />
          </div>
        </Link>
      </div>
    );
  }
}