const CourseCard = ({
  classes,
  id,
  status,
  image,
  name,
  summary,
  progress,
  price
}) => {
  // Nova variável para armazenar só o comportamento
  const actions = [];

  // removido a variável renderActions
  let posExtraClass, posLabel;

  if (status === "ACTIVE") {
    if (progress && progress.length > 0) {
      const progressTotal = progress.length;
      const progressCount = progress.filter(p => p.status === "DONE").length;

      if (progressCount === progressTotal) {
        posLabel = "Concluído";
      } else if (progressCount === 0) {
        posLabel = "Não iniciado";
      } else {
        const progressPercent = Math.floor(
          (progressCount * 100) / progressTotal
        );
        posLabel = `Progresso: ${progressPercent}%`;
      }

      // alterado de renderActions para actions
      actions.push({
        label: progressCount === 0 ? "Começar" : "Continuar"
      });
    } else {
      posLabel = price ? `Preço: R$ ${price}` : "Grátis";
      posExtraClass = classes.posHighlight;

      // alterado de renderActions para actions
      actions.push({ label: "Saber mais" });
      actions.push(
        price
          ? { label: "Comprar", link: `/payment/course/${id}` }
          : { label: "Começar" }
      );
    }
  } else {
    posLabel = "Em breve...";

    // alterado de renderActions para actions
    actions.push({ label: "Saber mais" });
  }

  return (
    <Card className={classes.card}>
      <CardActionArea disabled={status !== "ACTIVE"}>
        <CardMedia
          className={classNames(classes.media, {
            [classes.mediaDisabled]: status !== "ACTIVE"
          })}
          image={`/images/${image}`}
          title={name}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {name}
          </Typography>
          {posLabel && (
            <Typography
              className={classNames(classes.pos, posExtraClass)}
              color="textSecondary"
            >
              {posLabel}
            </Typography>
          )}
          <Typography component="p">{summary}</Typography>
        </CardContent>
      </CardActionArea>

      {/* Mapeia cada ação para a camada de apresentação */}
      <CardActions>
        {actions.map(action => (
          <Button
            key={action.label}
            size="small"
            color="primary"
            component={action.link ? Link : "button"}
            to={action.link}
          >
            {action.label}
          </Button>
        ))}
      </CardActions>
    </Card>
  );
};

export default withStyles(styles)(CourseCard);