import { h } from 'preact';
import PropTypes from 'prop-types';

const ChannelDescriptionSection = ({
  channelName,
  channelDescription,
  currentMembershipRole,
}) => {
  return (
    <div className="p-4 grid gap-2 crayons-card mb-4 channel_details">
      <h1 className="mb-1 channel_title">{channelName}</h1>
      <p>{channelDescription}</p>
      <p className="fw-bold">You are a channel {currentMembershipRole}</p>
    </div>
  );
};

ChannelDescriptionSection.propTypes = {
  channelName: PropTypes.string.isRequired,
  currentMembershipRole: PropTypes.string.isRequired,
  channelDescription: PropTypes.string.isRequired,
};

export default ChannelDescriptionSection;