import React, { FC, useState, useCallback, useRef } from 'react';
import { motion } from 'framer-motion';

interface ContactButtonProps {
  children: React.ReactNode;
}

/**
 * Contact Button component with a complex gradient and shadow effect.
 */
export const ContactButton: FC<ContactButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="rounded-full px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4 text-xs sm:text-sm md:text-base text-white font-medium uppercase tracking-widest shadow-lg"
      style={{
        background: 'linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)',
        boxShadow: '0px 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset',
        WebkitAppearance: 'none',
        outline: '2px solid white',
        WebkitOutlineOffset: '-3px',
      }}
    >
      {children}
    </motion.button>
  );
};