import Link from "next/link";

export default function footerButton({ theme, url, inner_text, is_external }) {
  const target = Boolean(is_external) ? is_external : "";
  if (theme == "Ada") {
    return (
      <div className="flex-1 overflow-visible">
        <Link href={url} target={target}>
          <div className="ml-1 mr-1 rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue  text-ada-werefox-cyan-darker dark:text-ada-werefox-cyan hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light transition">
            <p className="pl-2 pr-2 text-center sm:text-md text-sm">
              {inner_text}
            </p>
          </div>
        </Link>
      </div>
    );
  }
  if (theme == "Skye") {
    return (
      <div className="flex-1 overflow-visible">
        <Link href={url} target={target}>
          <div className="ml-1 mr-1 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue  text-skye-werefox-pink-darker dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light transition">
            <p className="pl-2 pr-2 text-center sm:text-md text-sm">
              {inner_text}
            </p>
          </div>
        </Link>
      </div>
    );
  } else {
    return (
      <div className="flex-1 overflow-visible">
        <Link href={url} target={target}>
          <div className="ml-1 mr-1 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue  text-alice-werefox-red-darker dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light transition">
            <p className="pl-2 pr-2 text-center sm:text-md text-sm">
              {inner_text}
            </p>
          </div>
        </Link>
      </div>
    );
  }
}