import { motion } from 'motion/react';
import { useTheme } from '../context/ThemeContext';

export default function Logo({ wordmark = "ModuleE" }: { wordmark?: string }) {
  const { config } = useTheme();

  return (
    <motion.div
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
      className="flex flex-col font-sans select-none"
    >
      <div className="text-sm font-bold tracking-[0.08em] text-white flex items-center">
        BRIDGE<span style={{ color: config.accent }}>{wordmark}</span>
      </div>
      <div className="text-[8px] font-bold tracking-[0.2em] text-zinc-500 uppercase -mt-0.5 font-mono">
        Outbound Systems OS
      </div>
    </motion.div>
  );
}