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

interface LiveProjectButtonProps {
  children: React.ReactNode;
}

/**
 * Ghost/outline pill button for live project links.
 */
export const LiveProjectButton: FC<LiveProjectButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{ backgroundColor: 'rgba(215, 226, 234, 0.1)' }}
      whileTap={{ scale: 0.98 }}
      className="rounded-full px-8 py-3 sm:px-10 sm:py-3.5 text-sm sm:text-base text-[#D7E2EA] font-medium uppercase tracking-widest border-2 border-[#D7E2EA] transition-colors duration-300"
    >
      {children}
    </motion.button>
  );
};