import Segment from '../shared/segment';
import PropTypes from 'prop-types';

function Header(props) {
  return (
    <Segment textAlign='center' color='violet' backgroundColor='violet'>
      <p>
        <span className='font-medium'>پیش نمایش </span>
        <span>فلش کارت‌ </span>
        <span className='font-medium'>{props.cardId}</span>
        <span> درس </span>
        <span className='font-medium'>{props.lessonName}</span>
        <span> بخش </span>
        <span className='font-medium'>{props.chapterName}</span>
      </p>
    </Segment>
  );
}

Header.propTypes = {
  cardId: PropTypes.number.isRequired,
  lessonName: PropTypes.string.isRequired,
  chapterName: PropTypes.object.isRequired
};

export default Header;
