import { socialBtnProps, textlinkProps, btnlinkProps } from "./types";
import Link from "next/link";
export function TextLink({id, href, label, color = "gray" } : textlinkProps) {
  const colorVariants = {
    gray: "text-gray-950 hover:decoration-amber-600"
  };
  return (
    <Link
    href={href ?? "#"} 
    id={id}
      className={`text-gray-950 font-medium hover:decoration-amber-600 text-xs transition:400 py-2 underline underline-offset-5`}
    >
      {label}
    </Link>
  );
}

export function TextLinkNew({id, href, label, color = "gray" } : textlinkProps) {
  const colorVariants = {
    gray: "text-gray-950 hover:decoration-amber-600"
  };
  return (
    <Link
    href={href ?? "#"} 
    target="_blank"
    id={id}
      className={`text-gray-950 font-medium hover:decoration-amber-600 text-xs transition:400 py-2 underline underline-offset-5`}
    >
      {label}
    </Link>
  );
}

export function BtnLink({id, href, label, color, target } : btnlinkProps) {

  return (
    <Link
    href={href ?? "#"} 
    {...(target ? { target: "_blank", rel: "noopener noreferrer" } : {})}
    id={id}
      className={`btn-style-${color} text-sm uppercase w-full text-center items-center justify-center tracking-widest font-medium transition:400 px-6 py-3 border-1 duration-300`}
    >
      {label}
    </Link>
  );
}

export function SocialButton({id, type = "button",color, label, icon, onClick} : socialBtnProps) {
  const colorVariants = {
    gray: "border-gray-300 bg-white text-gray-950 duration-800 hover:bg-gray-200"
  };
  return (
    <div className="mt-2">
      <button
        id={id}
        type="button"
        name={id}
        onClick={onClick}
        className={`border-gray-300 bg-white text-gray-950 duration-800 hover:bg-gray-200 flex w-full shadow-none cursor-pointer items-center justify-center gap-2 rounded-full border-1 px-3 py-3 text-sm font-semibold`}
      >
        <i className={icon}></i>
        <span className="text-sm font-medium">{label}</span>
        
      </button>
    </div>
  );
}