"use client";

import { CalendarDaysIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { Separator } from "./ui/separator";

interface XMap {
  [tag: string]: string;
}

interface ProjectCardProps {
  name: string;
  description: string;
  joinDate: string;
  location: string;
  tags?: XMap | null | never[] | string[];
  imageUri: string | null;
  minInvestment: number;
  totalInvestor: number;
  totalRaised: number;
  className?: string;
}

export function ProjectCard(props: ProjectCardProps) {
  return (
    <div
      className={cn(
        "flex flex-col group border-[1px] border-border relative hover:shadow-md rounded-xl h-[450px] ",
        props.className
      )}
    >
      <div className="flex flex-col h-full">
        {/* Image */}
        <div className="relative h-3/4 w-full">
          {props.imageUri ? (
            <Image
              src={props.imageUri}
              alt="Card image"
              fill
              className="rounded-t-xl bg-background dark:bg-background h-full"
            />
          ) : (
            <Image
              src="/money.png"
              alt="Card image"
              fill
              className="rounded-t-xl bg-background dark:bg-background h-full"
            />
          )}
        </div>
        <div className="flex flex-col h-full justify-between">
          {/* Info 0 overlaps Image */}
          <div className="bg-background dark:bg-background transition-all ease-out transform group-hover:-translate-y-24 duration-1000 group-hover:bg-opacity-100 z-10 p-4">
            <div className="font-semibold text-card-foreground transition-colors duration-1000 group-hover:text-primary">
              {props.name}
            </div>
            <p className="text-sm text-muted-foreground line-clamp-3">{props.description}</p>
          </div>

          {/* Info 1 */}
          <div>
            <div className="transition-transform duration-500 transform opacity-100 group-hover:opacity-0 p-4 ">
              <div className="flex items-center text-muted-foreground">
                <span className="flex items-center gap-1">
                  <CalendarDaysIcon width={20} />
                  <div className="text-xs">Joined {props.joinDate}</div>
                </span>
              </div>
              <div className="flex items-center text-muted-foreground">
                <span className="text-xs">{props.location}</span>
              </div>
              <div className="flex flex-wrap mt-1 items-center text-muted-foreground">
                {props.tags && Array.isArray(props.tags) ? (
                  props.tags.map((tag) => (
                    <span id="tag" key={tag} className="text-[10px] rounded-md bg-slate-200 dark:bg-slate-700 p-1 mr-1">
                      {tag}
                    </span>
                  ))
                ) : (
                  <span className="text-xs text-muted-foreground">No tags available</span>
                )}
              </div>
            </div>
          </div>

          {/* Info 2 */}
          <div className="hidden group-hover:flex group-hover:absolute group-hover:bottom-4 p-4 ">
            {/* Info 2 (Visible on hover) */}
            <div className="transition-transform duration-500 transform translate-y-6 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 w-full">
              <Separator className="-ml-4 mb-2" />
              <p className="text-base">
                <strong>
                  ${isNaN(props.totalRaised) || props.totalRaised == null ? "N/A" : props.totalRaised.toLocaleString()}
                </strong>{" "}
                committed and reserved
              </p>
              <Separator className="-ml-4 mb-2 mt-2" />
              <p className="mb-2 text-base">
                <strong>
                  {isNaN(props.totalInvestor) || props.totalInvestor == null
                    ? "N/A "
                    : props.totalInvestor.toLocaleString()}
                </strong>{" "}
                investors
              </p>
              <Separator className="-ml-4 mb-2" />
              <p className="text-base">
                <strong>
                  $
                  {isNaN(props.minInvestment) || props.minInvestment == null
                    ? "N/A"
                    : props.minInvestment.toLocaleString()}
                </strong>{" "}
                min. investment
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
