import { motion, Variants } from 'framer-motion';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';

interface AuthBottomSwitchProps {
  question: string;
  linkText: string;
  linkHref: string;
  customDelay?: number;
}

const fadeUp: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: (i = 0) => ({
    opacity: 1,
    y: 0,
    transition: { delay: i * 0.06, duration: 0.5, ease: [0.22, 1, 0.36, 1] },
  }),
};

export function AuthBottomSwitch({
  question,
  linkText,
  linkHref,
  customDelay = 3,
}: AuthBottomSwitchProps) {
  return (
    <>
      <motion.div
        variants={fadeUp}
        custom={customDelay}
        className="flex items-center justify-between mt-4 px-2 gap-2"
      >
        <p className="text-sm text-gray-500">{question}</p>
        <Link
          href={linkHref}
          className="text-sm text-yellow-600 font-bold hover:text-yellow-700 transition-colors flex items-center gap-1.5"
        >
          {linkText}
          <ArrowRight className="w-3 h-3" />
        </Link>
      </motion.div>
    </>
  );
}