"use client";

import { ReactNode } from "react";
import { motion } from "framer-motion";

interface FloatingLabelProps {
  children: ReactNode;
  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
  className?: string;
}

export function FloatingLabel({ children, position = "top-right", className = "" }: FloatingLabelProps) {
  const positionStyles = {
    "top-left": "top-4 left-4",
    "top-right": "top-4 right-4",
    "bottom-left": "bottom-4 left-4",
    "bottom-right": "bottom-4 right-4"
  };

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.3, delay: 0.2 }}
      className={`
        absolute ${positionStyles[position]}
        px-3 py-1.5
        bg-obsidian/80 backdrop-blur-sm
        border border-electric-cyan/20
        rounded-full
        font-jetbrains-mono text-xs
        text-electric-cyan
        shadow-lg
        ${className}
      `}
    >
      {children}
    </motion.div>
  );
}