import { useParams } from 'react-router-dom';
import Segment from '../shared/segment';
import PropTypes from 'prop-types';
import useQueryParams from '../../hooks/query-params';

function Header(props) {
  const { cardType } = useParams();
  const { priority } = useQueryParams();

  return (
    <Segment textAlign='center' color={color[cardType]} backgroundColor={color[cardType]}>
      <div className='flex flex-wrap items-center justify-around gap-3 xl:justify-between'>
        <div>
          <span>فلش کارت‌های </span>
          {priority && <span className='font-medium text-red-600'>{_[priority] + ' '}</span>}
          <span className={`font-medium text-${color[cardType]}-600`}>{_[cardType]}</span>
          <span> درس </span>
          <span className='font-medium'>{props.lessonName}</span>
          <span> بخش </span>
          <span className='font-medium'>{props.chapter.name}</span>
        </div>
        <div className={`rounded-full bg-${color[cardType]}-500 py-1 px-2.5 text-white`}>
          <span className='font-medium'>{props.chapter[`${cardType}CardCount`]}</span>
        </div>
      </div>
    </Segment>
  );
}

const _ = { review: 'مروری', new: 'جدید', archived: 'آرشیو شده', high: 'ضروری ' };
const color = { review: 'blue', new: 'green', archived: 'yellow' };

Header.propTypes = {
  lessonName: PropTypes.string.isRequired,
  chapter: PropTypes.object.isRequired
};

export default Header;
