freeCodeCamp/client/src/components/daily-coding-challenge/calendar-day.tsx

import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from '../helpers';
import GreenPass from '../../assets/icons/green-pass';
import GreenNotCompleted from '../../assets/icons/green-not-completed';
import { formatDisplayDate } from './helpers';

interface CalendarDayProps {
  dayNumber: number;
  date?: string;
  isCompleted?: boolean;
  isAvailable?: boolean;
}

// Todo: Change this to render checkmarks for JS and Python

function DailyCodingChallengeCalendarDay({
  dayNumber,
  date,
  isCompleted = false,
  isAvailable = false
}: CalendarDayProps): JSX.Element {
  const { t } = useTranslation();
  // dayNumber = 0 -> render nothing
  if (dayNumber === 0) return <div></div>;

  if (!isAvailable)
    return (
      <button
        disabled
        className='calendar-day not-available'
        data-playwright-test-label='calendar-day'
        aria-label={`${date && formatDisplayDate(date)}, (${t('aria.not-available')})`}
      >
        <span className='calendar-day-number' aria-hidden='true'>
          {dayNumber}
        </span>
      </button>
    );

  // isAvailable -> render link to challenge
  return (
    <Link
      to={`/learn/daily-coding-challenge/${date}`}
      className='calendar-day available'
      data-playwright-test-label='calendar-day'
      aria-label={`${date && formatDisplayDate(date)}`}
    >
      <span className='calendar-day-number' aria-hidden='true'>
        {dayNumber}
      </span>

      {isCompleted ? (
        <span
          className='completed'
          data-playwright-test-label='calendar-day-completed'
        >
          <GreenPass />
        </span>
      ) : (
        <span
          className='not-completed'
          data-playwright-test-label='calendar-day-not-completed'
        >
          <GreenNotCompleted />
        </span>
      )}
    </Link>
  );
}

DailyCodingChallengeCalendarDay.displayName = 'DailyCodingChallengeCalendarDay';

export default DailyCodingChallengeCalendarDay;