import * as React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

/**
 * Container com estilo de terminal: fundo escuro, borda, fonte monospace.
 */
const Terminal = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border border-border bg-zinc-900/95 font-mono text-sm shadow-xl",
      "p-4 text-foreground",
      className
    )}
    {...props}
  >
    {children}
  </div>
));
Terminal.displayName = "Terminal";

interface AnimatedStepProps extends React.HTMLAttributes<HTMLSpanElement> {
  delay?: number;
  className?: string;
  children?: React.ReactNode;
}

/**
 * Linha animada (fade-in + slide up) para uso dentro do Terminal.
 * Usado para exibir passos em sequência.
 */
function AnimatedStep({
  delay = 0,
  className,
  children,
  ...props
}: AnimatedStepProps) {
  return (
    <motion.span
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, delay }}
      className={cn("block", className)}
      {...props}
    >
      {children}
    </motion.span>
  );
}

export { Terminal, AnimatedStep };