import Image from 'next/image';
import Link from 'next/link';
import { ChevronRight } from 'lucide-react';

const ImageCard = ({ 
  title, 
  image, 
  link, 
  buttonText = "Courses",
  buttonIcon: ButtonIcon,
  defaultImageIcon: DefaultIcon,
  imageAlt = "Image"
}) => {
  return (
    <div className="bg-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:border-teal-200 overflow-hidden group hover:scale-[1.02]">
      <div className="p-8 text-center">
        {/* Image */}
        <div className="w-20 h-20 mx-auto mb-6 rounded-2xl overflow-hidden border-4 border-white shadow-lg">
          {image && image !== '/assets/default-image.jpg' ? (
            <Image
              src={
                image.startsWith('/')
                  ? `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com${image}`
                  : `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${image}`
              }
              alt={imageAlt}
              width={80}
              height={80}
              className="object-cover w-full h-full group-hover:scale-110 transition-transform duration-500"
            />
          ) : (
            <div className="w-full h-full flex items-center justify-center bg-linear-to-br from-teal-100 to-blue-100">
              <DefaultIcon className="w-10 h-10 text-teal-600" />
            </div>
          )}
        </div>
        
        {/* Title */}
        <h3 className="text-xl font-bold text-gray-900 mb-8 group-hover:text-teal-600 transition-colors">
          {title}
        </h3>
        
        {/* Button */}
        <Link 
          href={link}
          className="group/btn inline-flex items-center justify-center gap-3 bg-linear-to-r from-teal-600 to-blue-500 text-white font-semibold py-3.5 px-8 rounded-xl hover:shadow-lg transition-all duration-300 w-full"
        >
          <ButtonIcon className="w-5 h-5" />
          <span>{buttonText}</span>
          <ChevronRight className="w-4 h-4 transition-transform duration-300 group-hover/btn:translate-x-1" />
        </Link>
      </div>
    </div>
  );
};

export default ImageCard;