"use client";

import { motion } from "framer-motion";

interface CardProps {
  title: string;
  description: string;
  date: string;
}

export default function SpecialCard({ title, description, date }: CardProps) {
  return (
    <motion.div
      whileHover={{ scale: 1.05 }}
      transition={{ type: "spring", stiffness: 200, damping: 10 }}
      className="relative bg-white/20 backdrop-blur-lg border border-white/10 rounded-2xl p-6 shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-100 max-w-sm"
    >
      {/* Background Effect */}
      <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-pink-500/20 blur-3xl opacity-50"></div>

      {/* Card Content */}
      <div className="relative z-10">
        {/* Title */}
        <h2 className="text-2xl font-bold text-white">{title}</h2>

        {/* Description */}
        <p className="text-gray-200 mt-2">{description}</p>

        {/* Date at the bottom */}
        <div className="mt-4 text-gray-300 text-sm flex items-center justify-between">
          <span>📅 {date}</span>
          <span className="px-3 py-1 bg-gray-700/50 rounded-full text-xs">
            🔥 Special
          </span>
        </div>
      </div>
    </motion.div>
  );
}