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

import Image from 'next/image';
interface AuthHeaderProps {
  title: string;
  highlightText: string;
  subtitle: string;
  linkText: string;
  linkHref: string;
}

const scaleIn: Variants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: { delay: 0.2, duration: 0.4, ease: [0.22, 1, 0.36, 1] },
  },
};

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 AuthHeader({
  title,
  highlightText,
  subtitle,
  linkText,
  linkHref,
}: AuthHeaderProps) {
  return (
    <div className="text-center mb-8">
      <motion.div
        variants={scaleIn}
        className="w-24 h-24 mx-auto mb-6 rounded-3xl bg-white border border-gray-200 flex items-center justify-center shadow-sm overflow-hidden"
      >
        {}
        <Image
          src="/mascots/salto-happy.avif"
          alt="Mascot"
          className="w-full h-full object-cover"
          width={500}
          height={500}
        />
      </motion.div>

      <motion.h1
        variants={fadeUp}
        custom={0}
        className="text-4xl font-black uppercase tracking-tighter text-gray-900 mb-2"
      >
        {title} <span className="text-yellow-500">{highlightText}</span>
      </motion.h1>

      <motion.p variants={fadeUp} custom={1} className="text-gray-500 text-sm">
        {subtitle}{' '}
        <Link
          href={linkHref}
          className="text-yellow-600 font-bold hover:text-yellow-700 transition-colors uppercase tracking-wider"
        >
          {linkText}
        </Link>
      </motion.p>
    </div>
  );
}