import React, { useContext, useEffect } from 'react';
import { Card as AntdCard } from 'antd'; // Importing Ant Design's Card
import { GlobalContext } from '../../../Store';
import PropTypes from 'prop-types';
import './card.scss';

function Card({ title, content, image, children, className = '' }) {
  const { state } = useContext(GlobalContext);

  useEffect(() => {
    // Reacting to theme changes
  }, [state.theme.colors]);

  return (
    <AntdCard
      title={title}
      cover={image && <img src={image} alt={title} />}
      style={{
        background: state.theme.colors.colorBgContainer,
        borderRadius: state.theme.colors.borderRadius,
      }}
      className={className || ''} // Apply className only if it's passed
    >
      {content || children}
    </AntdCard>
  );
}

Card.propTypes = {
  /** Title of the card */
  title: PropTypes.string.isRequired,
  /** Content of the card */
  content: PropTypes.node,
  /** Image URL */
  image: PropTypes.string,
  /** Children (alternative to content) */
  children: PropTypes.node,
};

export default Card;
