import Image from 'next/image';
import Link from 'next/link';
import { 
  MapPin, 
  Star, 
  GraduationCap, 
  ChevronRight,
  Clock,
  DollarSign,
  Sparkles
} from 'lucide-react';

const CourseCard = ({ image, title, university, location, id, duration, fee, rating, flagimage, country_name, slug, university_slug }) => {
  // Fallback for image
  const validImage = image && typeof image === 'string' && image.trim() !== '' ? image : '/assets/co1.png';
  
  return (
    <Link href={`/${university_slug}/${slug}`}>
      <div className="group bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden h-full border border-gray-200 hover:border-teal-500/20">
        {/* Image Container */}
        <div className="relative h-48 w-full overflow-hidden">
          <Image
            src={validImage}
            alt={title || 'Course'}
            fill
            className="object-cover transition-transform duration-500 group-hover:scale-110"
          />
          
          {/* Gradient Overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent"></div>
          
          {/* Flag Badge */}
          {flagimage && (
            <div className="absolute top-4 right-4 z-10">
              <div className="w-10 h-10 rounded-full border-2 border-white shadow-md overflow-hidden">
                <Image
                  src={flagimage.startsWith('/')
                    ? `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com${flagimage}`
                    : `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${flagimage}`
                  }
                  alt={country_name || 'Flag'}
                  width={40}
                  height={40}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          )}

          {/* Rating Badge */}
          <div className="absolute top-4 left-4 z-10">
            <div className="bg-white/90 backdrop-blur-sm rounded-full px-3 py-1 flex items-center gap-1">
              <Star className="w-3 h-3 text-amber-500 fill-amber-500" />
              <span className="text-gray-800 font-semibold text-xs">4.8</span>
            </div>
          </div>

          {/* Duration Badge */}
          <div className="absolute bottom-4 left-4 z-10">
            <div className="bg-linear-to-r from-teal-600 to-blue-500 text-white rounded-full px-3 py-1 text-xs font-semibold">
              {duration || '2 Years'}
            </div>
          </div>
        </div>

        {/* Content Section */}
        <div className="p-6">
          {/* University Name */}
          <div className="flex items-center gap-2 mb-3">
            <div className="p-1.5 rounded-lg bg-linear-to-r from-teal-50 to-blue-50">
              <GraduationCap className="w-3 h-3 text-teal-600" />
            </div>
            <p className="text-gray-600 text-sm font-medium truncate">
              {university || 'University Name'}
            </p>
          </div>

          {/* Course Title */}
          <h3 className="text-lg font-bold text-gray-900 mb-3 line-clamp-2 h-12">
            <span className="group-hover:text-teal-600 transition-colors duration-300">
              {title || 'Course Title'}
            </span>
          </h3>

          {/* Location */}
          <div className="flex items-center gap-2 mb-4 text-gray-600 text-sm">
            <MapPin className="w-3 h-3" />
            <span>{location || 'Location'}</span>
          </div>

          {/* Additional Info */}
          <div className="grid grid-cols-2 gap-3 mb-6">
            <div className="text-center bg-gray-50 rounded-xl py-3">
              <div className="flex items-center justify-center gap-1 mb-1">
                <Clock className="w-3 h-3 text-gray-500" />
                <div className="text-xs text-gray-500">Duration</div>
              </div>
              <div className="text-sm font-semibold text-gray-900">{duration || '2-4 Years'}</div>
            </div>
            <div className="text-center bg-gray-50 rounded-xl py-3">
              <div className="flex items-center justify-center gap-1 mb-1">
                <DollarSign className="w-3 h-3 text-gray-500" />
                <div className="text-xs text-gray-500">Fee</div>
              </div>
              <div className="text-sm font-semibold text-gray-900">{fee || '$15,000'}</div>
            </div>
          </div>

          {/* Action Button */}
          <div className="flex items-center justify-between">
            <button className="flex-1 bg-linear-to-r from-teal-600 to-blue-500 text-white text-center py-2 px-4 rounded-lg hover:from-teal-700 hover:to-blue-600 transition-all duration-300 font-semibold text-sm">
              View Details
            </button>
            
            <div className="ml-3 p-2 rounded-lg bg-linear-to-r from-teal-50 to-blue-50 text-teal-600 group-hover:bg-teal-600 group-hover:text-white transition-all duration-300">
              <ChevronRight className="w-4 h-4" />
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default CourseCard;