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

interface BadgeProps {
  children: ReactNode;
}

/**
 * Componente Badge para etiquetas de sección con estilo Flat Premium.
 *
 */
export const Badge = ({ children }: BadgeProps) => {
  return (
    <motion.div
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.5 }}
      className="inline-block bg-ice/30 px-4 py-1.5 rounded-full mb-8 border border-ice"
    >
      <span className="text-[12px] font-bold tracking-[0.1em] uppercase text-ocean">
        {children}
      </span>
    </motion.div>
  );
};