src/components/Personal/ActionCard.jsx

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

const ActionCard = ({ title, subtitle, icon, onClick }) => {
  return (
    <div className="action-card" onClick={onClick}>
      {icon && <div className="action-icon">{icon}</div>}
      <div className="action-content">
        <h3>{title}</h3>
        <p>{subtitle}</p>
      </div>
    </div>
  );
};

ActionCard.propTypes = {
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  icon: PropTypes.node,
  onClick: PropTypes.func
};

export default ActionCard;