import React from 'react';
import styled, { keyframes } from 'styled-components';

interface CardProps {
  heading?: string;
  content?: string;
  bgColor?: string;
  bgColorLight?: string;
  textColorHover?: string;
  boxShadowColor?: string;
  icon?: React.ReactNode;
}

const sparkleAnimation = keyframes`
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
`;

const CardWrapper = styled.div<CardProps>`
  position: relative;

  .sparkle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    animation: ${sparkleAnimation} 1s ease-in-out infinite;
  }

  .custom-card {
    width: 400px;
    border-radius:15px;
    height: 500px;
    background: #fff;
    border-top-right-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 14px 26px rgba(0,0,0,0.1);
    transition: all 0.3s ease-out;
    text-decoration: none;
    
    /* Custom color variables */
    --bg-color: ${props => props.bgColor || '#ffd861'};
    --bg-color-light: ${props => props.bgColorLight || '#ffeeba'};
    --text-color-hover: ${props => props.textColorHover || '#4C5656'};
    --box-shadow-color: ${props => props.boxShadowColor || 'rgba(255, 215, 97, 0.48)'};
  }

  .custom-card:hover {
    transform: translateY(-5px) scale(1.005) translateZ(0);
    box-shadow: 0 24px 36px rgba(0,0,0,0.11),
      0 24px 46px var(--box-shadow-color);
  }

  .custom-card:hover .overlay {
    transform: scale(8) translateZ(0);
  }

  .circle {
    width: 131px;
    height: 131px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease-out;
    margin-bottom: 20px;
  }

  .circle svg {
    width: 60px;
    height: 60px;
    color: var(--bg-color);
  }

  .overlay {
    width: 170px;
    position: absolute;
    height: 170px;
    border-radius: 50%;
    background: var(--bg-color);
    top: 330px;
    left: 400px;
    z-index: 0;
    transition: transform 0.3s ease-out;
  }

  .card-heading {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    z-index: 1000;
  }

  .card-content {
    font-size: 17px;
    color: #4C5656;
    text-align: center;
    padding: 0 20px;
    z-index: 1000;
    transition: color 0.3s ease-out;
  }
`;

const Card: React.FC<CardProps> = ({ 
  heading, 
  content, 
  bgColor, 
  bgColorLight, 
  textColorHover, 
  boxShadowColor,
  icon 
}) => {
  const renderSparkles = () => {
    const sparkles = [];
    for (let i = 0; i < 5; i++) {
      sparkles.push(
        <div 
          key={i} 
          className="sparkle" 
          style={{
            top: `${Math.random() * 100}%`,
            left: `${Math.random() * 100}%`,
            animationDelay: `${Math.random()}s`
          }} 
        />
      );
    }
    return sparkles;
  };

  return (
    <CardWrapper 
      bgColor={bgColor}
      bgColorLight={bgColorLight}
      textColorHover={textColorHover}
      boxShadowColor={boxShadowColor}
    >
      <div className="body">
        <div className="custom-card p-3">
          {renderSparkles()}
          <div className="overlay" />
          <div className="circle">
            {icon}
          </div>
          {heading && <div className="text-2xl z-50 font-bold my-3 text-gray-700">{heading}</div>}
          {content && <div className="card-content">{content}</div>}
        </div>
      </div>
    </CardWrapper>
  );
};

export default Card;