import { motion } from 'framer-motion';
import PlusIcon from './icons/PlusIcon';

interface MoreProjectButtonProps {
  onClick?: () => void;
}

function MoreProjectButton({ onClick }: MoreProjectButtonProps) {
  return (
    <motion.button
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true, margin: '-100px' }}
      transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
      className='sm:aspect-[4/3] border border-[#3D425C] rounded-[48px] px-6 py-4 flex sm:flex-col sm:justify-center justify-between items-center gap-2'
      onClick={onClick}
    >
      <p className='font-medium leading-none font-gilroy'>Show more</p>
      <PlusIcon />
    </motion.button>
  );
}

export default MoreProjectButton;
