import React, { ReactNode, ReactElement } from "react" import { handleNavigation, Navigation } from "../index" import { RequireAtLeastOne } from "src/utils/types" import { History } from "history" import "./index.scss" export interface CoursePropsBasic { image: string title: string courseId: number status: ReactNode navigate?: (courseId: number) => void history?: History subtitle?: string tag?: ReactElement marketing?: string } export type CourseProps = RequireAtLeastOne< CoursePropsBasic, "history" | "navigate" > const CourseCardH: React.FC<CourseProps> = ({ image, title, subtitle, status, navigate, courseId, tag, history, marketing, }) => { return ( <div className={"course-card course-card-h"} onClick={(e) => { if (navigate) { handleNavigation({ e, courseId, navigate }) } else { handleNavigation({ e, courseId, history } as Navigation) } }} > <div className="show"> <img src={image} alt={title} /> {marketing && <div className="marketing">{marketing}</div>} {tag} </div> <div className="info"> <div className="title">{title}</div> {subtitle && <div className="subtitle">{subtitle}</div>} <div className="status">{status}</div> </div> </div> ) } CourseCardH.displayName = "CourseCardH" export default CourseCardH