import { motion } from 'framer-motion';

export function ScrollDownArrow({ targetId = 'content' }) {
    const scrollToContent = () => {
        const contentSection = document.getElementById(targetId);
        contentSection?.scrollIntoView({ behavior: 'smooth' });
    };

    return (
        <motion.button
            onClick={scrollToContent}
            initial={{ opacity: 0 }}
            animate={{ 
                opacity: 1,
                y: [0, 10, 0]
            }}
            transition={{ 
                duration: 1.5,
                repeat: Infinity,
                delay: 1
            }}
            className="absolute bottom-24 cursor-pointer focus:outline-none"
            aria-label="Scroll to content"
        >
            <svg 
                xmlns="http://www.w3.org/2000/svg" 
                className="h-12 w-12 text-white/80 hover:text-white transition-colors"
                fill="none" 
                viewBox="0 0 24 24" 
                stroke="currentColor"
            >
                <path 
                    strokeLinecap="round" 
                    strokeLinejoin="round" 
                    strokeWidth={2} 
                    d="M19 14l-7 7m0 0l-7-7m7 7V3" 
                />
            </svg>
        </motion.button>
    );
} 