import React from "react";

export interface Link {
  name: string;
  url: string;
}
interface LinkProps {
  links: Link[];
}

export const Links: React.FC<LinkProps> = ({ links }) => {
  const postData = (url = ""): void => {
    fetch(url, {
      method: "POST",
    })
      .then((response) => response.json())
      .then((data) => {
        console.log("Success:", data);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  };

  // useEffect((): void => {
  //   postData("https://dog.ceo/api/breeds/list/all"); // TODO: Change to '/api/view'
  // }, []);

  const handleClick = (): void => {
    postData("https://dog.ceo/api/breeds/list/all"); // TODO: Change to '/api/click'
  };

  return (
    <div className="text-s flex flex-col items-center w-full absolute top-6 font-karla">
      <img className="mb-3" src="csc_logo.png" alt="CSC Logo" width="100px" />
      <h1 className="font-bold">@uwcsclub</h1>
      <ul className="flex flex-col my-6 w-full">
        {links.map(({ name, url }, i) => (
          <li key={i} className="w-full contents">
            <a
              className="btn bg-gray-450 p-3 text-white font-bold text-center self-center my-1.5
        hover:bg-white hover:text-black border-2 border-gray-800 transition duration-200 ease-in-out
        w-11/12 sm:w-4/12"
              href={url}
              target="_blank"
              rel="noreferrer"
              onClick={handleClick}
            >
              {name}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};