import React from "react";
import StatusBadge from "@/app/components/StatusBadge";
import { useRouter } from "next/navigation";
import { PortfolioStatus } from "@/app/db/schema/portfolio";
import { formatNumber } from "@/app/utils";
import Image from "next/image";


const styles = {
  wrapper:
    "group py-2 px-3 active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-2xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center",
  header: "relative mt-2 w-full border-brandblue",
  budgetWrapper: "min-h-7 pr-4 flex justify-end w-full text-right max-h-16 my-auto text-gray-700 group-hover:text-white transition-all duration-500 ease-in-out relative",
  imageWrapper: "rounded-2xl overflow-hidden flex justify-center items-center",
  wrapperAnime: "transition-all duration-500 ease-in-out",
  image: "object-cover mx-auto",
  textWrapper: "pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-gray-700 text-center group-hover:text-white transition-all duration-500 ease-in-out",
};

interface CardProps {
  id: bigint;
  title: string;
  image: string;
  budget: number | null;
  status: (typeof PortfolioStatus)[number];
};

const Card = ({ id, title, image, budget, status }: CardProps) => {
  const router = useRouter();

  function handleClick() {
    router.push(`/portfolio/${id}`);
  }

  const budgetFormatted = budget ? "£" + formatNumber(budget) : "";

  return (
    <div>
      <div
        onClick={handleClick}
        className={[styles.wrapper, styles.wrapperAnime].join(" ")} 
      >
        <div className={styles.header}>
          <div className={styles.budgetWrapper} >{budgetFormatted}</div>
          <div className={styles.imageWrapper}>
            <Image
              src={image}
              className={styles.image}
              alt=""
              width={80}
              height={80}
            />
          </div>
        </div>
        <div className={styles.textWrapper}>
          <h1>{`${title}`}</h1>
        </div>
        <div className="mb-4 flex justify-end w-full">
          <div className="flex justify-center w-full">
            <StatusBadge status={status} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Card;
