// BlockResponseCard.jsx
import React from 'react';
import PropTypes from 'prop-types';

const BlockResponseCard = ({ index, response }) => {
  return (
    <div className="bg-white shadow-lg rounded-lg overflow-hidden my-4 hover:border-2 hover:border-electric-blue">
      <div className="p-4">
        <h2 className="text-xl font-semibold mb-2">Block {index + 1} Response</h2>
        <div className="text-gray-700 text-base whitespace-pre-wrap max-h-[300px] overflow-y-scroll">
          {response ? response : 'No response available'}
        </div>
      </div>
    </div>
  );
};

BlockResponseCard.propTypes = {
  index: PropTypes.number.isRequired,
  response: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
};

export default BlockResponseCard;