/* eslint-disable @typescript-eslint/no-explicit-any */

import styles from "./course-card.module.scss"
import courseImg from "../../../../images/blog-img.jpg"
import { Link } from "@inertiajs/react"

interface CourseCardProps {
  course: any;
}

const CourseCard = ({ course }: CourseCardProps) => {
    const { id, title, student_count, price } = course
  return (
    <Link href={ `/dashboard/education/${ id }` } className={ styles["course__card"] }>
        <img src={ courseImg } alt="course thumbnail" />
        <h3>${ Number(price).toLocaleString("en-US") }</h3>
        <h4>{ title }</h4>
        <div className={ styles["course__card--student"] }>
            <h6>Enrolled Students</h6>
            <span>{ student_count }</span>
        </div>
        <button>Enroll Now</button>
    </Link>
  )
}

export default CourseCard