"use client";

import { motion, AnimatePresence } from "motion/react";
import { useState } from "react";
import ActionMenu from "./action-menu";

type App = {
  id: string;
  name: string;
  description?: string;
  address: string;
  ssh_addr?: string;
};

interface Props {
  app: App;
}

export default function AppCard({ app }: Props) {
  let pingStatus = true;

  const [hovered, setHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className={`
        relative
        rounded-2xl
        bg-gray-100
        p-3
        ${hovered && "border bg-white"}
        transition-all
        duration-200
      `}
    >
      <div className="absolute top-4 right-4">
        <div className="relative">
          <div className="absolute inset-0 rounded-full bg-green-500 animate-ping opacity-30" />
          <div className="relative h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white" />
        </div>
      </div>

      <h3 className="text-2xl font-bold">{app.name}</h3>
      <a
        className={`${hovered && "text-blue-600"} transition-colors duration-200`}
        target="_blank"
        href={`http://${app.address}`}
      >
        {app.address}
      </a>
      {/*<AnimatePresence>
        {hovered && (
          <motion.div
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.2 }}
          >
            {app.description && <span>{app.description}</span>}
            <ActionMenu id={app.id} />
          </motion.div>
        )}
      </AnimatePresence>*/}

      <AnimatePresence>
        {hovered && (
          <motion.div
            initial={{ opacity: 0, y: -4 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -4 }}
            transition={{ duration: 0.15 }}
            className={`absolute bottom-3 left-3 right-3 ${app.description && "bg-white"} pt-2 flex flex-col gap-1`}
          >
            {app.description && (
              <span className="text-sm text-muted-foreground">
                {app.description}
              </span>
            )}
            <ActionMenu id={app.id} />
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}