import React from "react";
import PropTypes from "prop-types";
import {
  CardWrapper,
  EndDate,
  LearnersCount,
  Rates,
  Rating,
  StarIcon,
  Title,
} from "./styles";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const formatLearnersCount = (count) => {
  if (count >= 1000) {
    return `${Math.floor(count / 1000)}k`;
  } else {
    return count.toString();
  }
};
const CourseCard = ({ course, isSelected }) => {
  const { findText } = useTranslation(wordStore);
  const { id, title, endDate, rating, learnersCount } = course;
  return (
    <CardWrapper selected={isSelected}>
      <Title>{title}</Title>
      <EndDate>
        <span>{findText("Course ends:")}</span>
        {endDate}
      </EndDate>

      <Rates>
        <Rating>
          <StarIcon />
          {rating}
        </Rating>
        <div className="divider"></div>
        <LearnersCount>
          {formatLearnersCount(learnersCount)}{" "}
          <span>{findText("learners")}</span>{" "}
        </LearnersCount>
      </Rates>
    </CardWrapper>
  );
};
CourseCard.propTypes = {
  course: PropTypes.shape({
    title: PropTypes.string.isRequired,
    endDate: PropTypes.string.isRequired,
    rating: PropTypes.number.isRequired,
    learnersCount: PropTypes.number.isRequired,
  }).isRequired,
};
export default CourseCard;
