"use client";

import {formatDistanceToNow} from "date-fns";
import {Badge} from "@/components/ui/badge";
import {useRouter} from "next/navigation";
import {PATIENTS_SESSIONS_URL} from "@/lib/constants";


type PatientSessionCardProps = {
    sessionId: string;
    clientFullName: string;
    sentDate: number | string | Date;
    sessionTitle?: string | null;
    sessionLatestMessage: string;
}


export default function PatientSessionCard(props: PatientSessionCardProps) {
    const router = useRouter();

    return (
        <button
            className={"flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"}
            onClick={() =>
                router.push(`${PATIENTS_SESSIONS_URL}/${props.sessionId}`)
            }
        >
            <div className="flex w-full flex-col gap-1">
                <div className="flex items-center">
                    <div className="flex items-center gap-2">
                        <div className="font-semibold">{props.clientFullName}</div>
                        <span className="flex h-2 w-2 rounded-full bg-blue-600"/>
                    </div>
                    <div className={"ml-auto text-xs text-muted-foreground"}>
                        {formatDistanceToNow(props.sentDate, {
                            addSuffix: true,
                        })}
                    </div>
                </div>
                <div className="text-xs font-medium">
                    {props.sessionTitle}
                </div>
            </div>
            <div className="line-clamp-2 text-xs text-muted-foreground">
                {props.sessionLatestMessage}
            </div>
            <div className="flex items-center gap-2">
                <Badge key={"label"}>
                    {"Recent Message"}
                </Badge>
            </div>
        </button>
    )
}