import { motion } from "framer-motion";
import { useReducedMotion } from "../hooks/useReducedMotion";

const lines = [
  { prompt: "$", text: "whoami" },
  { prompt: ">", text: "desarrollador · creador de soluciones", dim: true },
  { prompt: "$", text: "cat filosofia.txt" },
  { prompt: ">", text: '"Creo en las soluciones."', dim: true },
  { prompt: "$", text: "./resolver --problema=real" },
  { prompt: ">", text: "✓ analizado  ✓ diseñado  ✓ construido", accent: true },
];

export default function TerminalCard() {
  const reduced = useReducedMotion();

  return (
    <div className="glow-border rounded-2xl">
      <div className="glass grain relative rounded-2xl p-6 font-mono text-sm shadow-2xl shadow-black/40">
        <div className="flex items-center gap-1.5 mb-5">
          <span className="h-3 w-3 rounded-full bg-red-400/70" />
          <span className="h-3 w-3 rounded-full bg-yellow-400/70" />
          <span className="h-3 w-3 rounded-full bg-green-400/70" />
          <span className="ml-3 text-xs text-[color:var(--color-muted)]">portfolio.sh</span>
        </div>

        <div className="flex flex-col gap-2.5">
          {lines.map((line, i) => (
            <motion.div
              key={i}
              initial={reduced ? false : { opacity: 0, x: -8 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.5 + i * 0.35, duration: 0.4 }}
              className={
                line.accent
                  ? "text-[color:var(--color-accent-3)]"
                  : line.dim
                  ? "text-[color:var(--color-muted)]"
                  : "text-[color:var(--color-ink)]"
              }
            >
              <span className="text-[color:var(--color-accent)] mr-2">{line.prompt}</span>
              {line.text}
            </motion.div>
          ))}
          <motion.span
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.5 + lines.length * 0.35 }}
            className="inline-block h-4 w-2 bg-[color:var(--color-accent)] animate-pulse"
          />
        </div>
      </div>
    </div>
  );
}
