import React, { ReactNode, useState } from 'react';

interface PlaygroundCardProps {
  title: string;
  children: ReactNode;
  icon?: ReactNode;
  maxWidth?: string;
}

export const PlaygroundCard: React.FC<PlaygroundCardProps> = ({ 
  title, 
  children, 
  icon,
  maxWidth = '600px'
}) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="playground-card"
      style={{
        maxWidth,
        margin: '2rem auto',
        backgroundColor: isHovered ? 'var(--ifm-background-surface-color)' : 'var(--ifm-background-color)',
        border: `1px solid ${isHovered ? 'var(--ifm-color-primary)' : 'var(--uc-border-color)'}`,
        borderRadius: 'var(--ifm-card-border-radius)',
        padding: '2rem',
        textAlign: 'center',
        transition: 'all 0.2s ease-in-out',
        boxShadow: isHovered ? 'var(--ifm-global-shadow-md)' : 'var(--ifm-global-shadow-lw)',
        transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {icon && (
        <div style={{ marginBottom: '1rem' }}>
          {icon}
        </div>
      )}
      
      <h3
        style={{
          color: 'var(--ifm-heading-color)',
          fontWeight: 'var(--ifm-heading-font-weight)',
          marginBottom: '1rem',
          fontSize: '1.25rem',
          margin: '0 0 1rem 0'
        }}
      >
        {title}
      </h3>
      
      <div
        style={{
          color: 'var(--ifm-color-content-secondary)',
          lineHeight: 'var(--ifm-line-height-base)',
          fontSize: '0.9rem'
        }}
      >
        {children}
      </div>
    </div>
  );
};

export default PlaygroundCard;
