import { useState } from "react";
import PlusIcon from "../PlusIcon";
import NewPortfolioModal from "./NewPortfolioModal";

const styles = {
  wrapper:
    "group bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer rounded-3xl flex flex-col items-center justify-center aspect-square",
  header: "relative mt-2 mx-2 w-full",
  imageWrapper:
    "relative rounded-2xl overflow-hidden flex justify-center items-center",
  wrapperAnime: "transition-all duration-500 ease-in-out",
  image: "object-cover w-8/12 h-8/12 mx-auto fill-white",
  textWrapper: "w-full flex justify-center items-center pt-6",
  text: "pb-6 font-medium leading-none text-base tracking-wider text-gray-400",
};

const AddNewCard = () => {
  const title = "New Portfolio";
  const [isModalOpen, setModalIsOpen] = useState(false);

  const openModal = () => {
    setModalIsOpen(true);
  };

  return (
    <a onClick={openModal}>
      <div  className="flex justify-center">
        <div className={[styles.wrapper, styles.wrapperAnime].join(" ")}>
          <div className={styles.header}>
            <div className={styles.imageWrapper}>
              <div className="w-1/4">
                <PlusIcon color="white" />
                <NewPortfolioModal
                  isOpen={isModalOpen}
                  setIsOpen={setModalIsOpen}
                />
              </div>
            </div>
          </div>
          <div className={styles.textWrapper}>
            <h1 className={styles.text}>{`${title}`}</h1>
          </div>
        </div>
      </div>  
    </a>
  );
};

export default AddNewCard;
