import {ClickableDashboardCard} from "@/components/Application/Common/DashboardCards";
import {BellRing, CalendarClock, LibraryBig, MessageCircleMore} from "lucide-react";
import {CALENDAR_APPOINTMENTS_URL, LIBRARY_RESOURCE_URL, NOTIFICATIONS_URL, SESSIONS_URL} from "@/lib/constants";

type ClientDashboardCardsPropsType = {
    sessions: number | string;
    appointments: number | string;
    resources: number | string;
    notifications: number | string;
}

export default function ClientDashboardCards(props: ClientDashboardCardsPropsType) {
    return (
        <div className={"grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-4"}>
            <ClickableDashboardCard
                title={"Sessions & Clients"}
                description={"The number of client sessions you have"}
                icon={MessageCircleMore} link={SESSIONS_URL}
                cardInformation={props.sessions}/>

            <ClickableDashboardCard
                title={"Appointments"}
                description={"The number of future appoints you have."}
                icon={CalendarClock} link={CALENDAR_APPOINTMENTS_URL}
                cardInformation={props.appointments}/>


            <ClickableDashboardCard
                title={"Library Resources"}
                description={"Share useful quotes, articles and videos to your patients."}
                icon={LibraryBig} link={LIBRARY_RESOURCE_URL}
                cardInformation={props.resources}/>


            <ClickableDashboardCard
                title={"Notifications"}
                description={"Realtime notification on patient self evaluation reports."}
                icon={BellRing} link={NOTIFICATIONS_URL}
                cardInformation={props.notifications}/>

        </div>
    )
}