"use client"
import Image from "next/image";
import { URL_IMAGE } from "@/utils/url";
import { Program } from "@/types/models";

import { format } from "date-fns";
import { Link } from "@/i18n/navigation";
import { CalendarDays, DollarSign, MapPin, Watch } from "lucide-react";

export function SessionBox({ session }: { session: Program }) {
    return (
        <div className="space-y-2 border rounded-md">
            <div className="size-full h-48 rounded-md">
                <Link href={`/dashboard/sessions/${session.id}`}>
                    {
                        session?.image ?
                            <Image
                                src={`${URL_IMAGE}/${session?.image}`}
                                alt={session?.name}
                                className="size-full object-cover rounded-t-md"
                                width={250}
                                height={250}
                            />
                            :
                            <span className="bg-gray-500 w-full h-48 block rounded-t-md" />
                    }
                </Link>
            </div>
            <div className="p-2">
                <Link href={`/dashboard/sessions/${session.id}`} className="text-lg font-semibold">
                    {session?.name}
                </Link>

                <hr className="my-2" />

                <Link href={`/dashboard/sessions/${session.id}`} className=" line-clamp-3 text-gray-500 text-sm">
                    {session?.description ? session?.description : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, repellat optio mollitia obcaecati autem expedita accusantium nemo pariatur tempore delectus error provident rerum facilis repudiandae fugit, repellendus ipsa possimus. Vel?"}
                </Link>

                <hr className="my-2" />

                <div className="space-y-2 *:flex *:items-center *:gap-2 text-black">
                    <div>
                        <span>
                            <CalendarDays className="size-4 mb-1" />
                        </span>
                        <span>
                            {format(session?.start_date, "do MMMM yyyy")}
                        </span>
                    </div>

                    <div>
                        <span>
                            <MapPin className="size-4 mb-1" />
                        </span>
                        <span>
                            {session?.country} - {session?.city}
                        </span>
                    </div>

                    <div>
                        <span>
                            <DollarSign className="size-4 mb-1" />
                        </span>
                        <span>
                            {session?.price || "0"}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    )
}