import { Terminal, Pencil, FileTerminal } from "lucide-react";
import { motion } from "motion/react";

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

type Props = {
  id: string;
};

export default function ActionMenu({ id }: Props) {
  const buttonClass =
    "flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-all duration-150 hover:bg-green-50 hover:text-green-600 active:scale-95";
  return (
    <TooltipProvider delayDuration={150}>
      <motion.div
        initial={{ opacity: 0, y: 8, scale: 0.95 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        exit={{ opacity: 0, y: 8, scale: 0.95 }}
        transition={{
          type: "spring",
          stiffness: 450,
          damping: 28,
        }}
        className="flex justify-end"
      >
        <div className="flex flex-row justify-end gap-1.5">
          <Tooltip>
            <TooltipTrigger asChild>
              <button
                className={buttonClass}
                onClick={() => {
                  // SSH
                }}
              >
                <Terminal className="h-5 w-5" />
              </button>
            </TooltipTrigger>
            <TooltipContent>
              <p>SSH</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
              <button
                className={buttonClass}
                onClick={() => {
                  // Blog
                }}
              >
                <Pencil className="h-5 w-5" />
              </button>
            </TooltipTrigger>
            <TooltipContent>
              <p>Create Blog</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
              <button
                className={buttonClass}
                onClick={() => {
                  // Scripts
                }}
              >
                <FileTerminal className="h-5 w-5" />
              </button>
            </TooltipTrigger>
            <TooltipContent>
              <p>Run Scripts</p>
            </TooltipContent>
          </Tooltip>
        </div>
      </motion.div>
    </TooltipProvider>
  );
}