import {Input} from "@/components/ui/input";
import {Search} from "lucide-react";
import {ScrollArea} from "@/components/ui/scroll-area";
import {formatDistanceToNow} from "date-fns";
import {Badge} from "@/components/ui/badge";

export default function ClientSessions() {

    return (
        <div className="p-4 md:gap-8 md:p-8">

            <div className="p-4">
                <h2 className="text-2xl font-bold tracking-tight">
                    Therapy Sessions
                </h2>
                <p className="text-muted-foreground">
                    Here&apos;s a list of your therapy sessions with your clients/patients!
                </p>
            </div>

            <div className="bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
                <form>
                    <div className="relative">
                        <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground"/>
                        <Input placeholder="Search" className="pl-8"/>
                    </div>
                </form>
            </div>


            <ScrollArea className="h-full">
                <div className="flex flex-col md:grid md:grid-cols-2 gap-2 p-4 pt-0">

                    {
                        [1, 2, 2, 2, 2, 2, 2, 2, 2, 2].map((a, i) => (
                            <button
                                key={"item.id"}
                                className={"flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"}
                                // onClick={() =>
                                //     setMail({
                                //         ...mail,
                                //         selected: item.id,
                                //     })
                                // }
                            >
                                <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">Dlamini Lindelwa Sfiso</div>
                                            <span className="flex h-2 w-2 rounded-full bg-blue-600"/>
                                        </div>
                                        <div className={"ml-auto text-xs text-muted-foreground"}>
                                            {formatDistanceToNow(new Date(), {
                                                addSuffix: true,
                                            })}
                                        </div>
                                    </div>
                                    <div className="text-xs font-medium">
                                        Meeting tomorrow
                                    </div>
                                </div>
                                <div className="line-clamp-2 text-xs text-muted-foreground">
                                    Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the
                                    project details and have some ideas I'd like to share. It's crucial that we align on
                                    our
                                    next steps to ensure the project's success.
                                </div>
                                <div className="flex items-center gap-2">
                                    <Badge key={"label"}>
                                        {"Important Label"}
                                    </Badge>
                                </div>
                            </button>
                        ))
                    }

                </div>
            </ScrollArea>


        </div>
    )
}