import React from 'react';
import PropTypes from 'prop-types';

/**
 * SummerCampCard component - displays summer camp information with image background
 * @param {Object} props - Component props
 * @returns {JSX.Element} - Rendered component
 */
const SummerCampCard = ({ 
  title = "大国少年-世界正东方", 
  subtitle = "亲子夏令营", 
  badge = "亲子夏令营", 
  price = "¥1280", 
  discount = "限时优惠", 
  episodes = 16, 
  subscribers = 1140 
}) => {
  return (
    <div className="relative overflow-hidden rounded-b-3xl shadow-lg">
      {/* Background image with overlay */}
      <div 
        className="absolute inset-0 z-0 bg-cover bg-center" 
        style={{ 
          backgroundImage: `url('/assets/images/summer-camp.jpg')`,
          filter: 'brightness(0.4)'
        }}
      ></div>
      
      {/* Gradient overlay */}
      <div className="absolute inset-0 z-1 bg-gradient-to-b from-red-500/70 to-red-600/90"></div>
      
      {/* Content */}
      <div className="relative z-10 p-4">
        <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 mb-3 inline-block">
          <div className="text-white font-semibold">{badge}</div>
        </div>
        
        <h1 className="text-2xl text-white font-bold mb-1">{title}</h1>
        <h2 className="text-lg text-white/90">{subtitle}</h2>
        
        <div className="mt-4 flex justify-between items-center">
          <div className="text-orange-300 font-bold text-2xl">{price}</div>
          <div className="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full">{discount}</div>
        </div>
        
        <div className="flex justify-between text-xs text-white/80 mt-3">
          <div>已更新{episodes}期</div>
          <div>{subscribers}人订阅</div>
        </div>
      </div>
    </div>
  );
};

SummerCampCard.propTypes = {
  title: PropTypes.string,
  subtitle: PropTypes.string,
  badge: PropTypes.string,
  price: PropTypes.string,
  discount: PropTypes.string,
  episodes: PropTypes.number,
  subscribers: PropTypes.number
};

export default SummerCampCard;