import { redirect } from "next/navigation";
import { Separator } from "@/components/ui/separator";
import { getServerAuthSession } from "@/server/auth";
import { ZDay } from "@lifetracker/shared/types/days";
import EditableDayComment from "./EditableDayComment";
import { MoodStars } from "./MoodStars";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react";
import spacetime from "spacetime";
import EditableHour from "@/components/dashboard/hours/EditableHour";

export default async function MonthView({
    dateRange,
}: {
    dateRange: string[];
}) {
    const session = await getServerAuthSession();
    if (!session) {
        redirect("/");
    }


    return (
        <div className="flex flex-col gap-3">
            <div className="flex justify-between pr-4">
                <div className="flex">
                    <Link
                        href={`/dashboard/timeline/month/last`}
                        className={cn(
                            "flex-0 items-center rounded-[inherit] px-3 py-2",
                        )}
                    >
                        <div className="flex w-full justify-between">
                            <ArrowLeftSquare size={18} />
                        </div>
                    </Link>
                    <span className="text-2xl flex-1">
                        {spacetime().format("{day}, {month} {date}, {year}")}
                    </span>
                    <Link
                        href={`/dashboard/timeline/month/next`}
                        className={cn(
                            "flex-0 items-center rounded-[inherit] px-3 py-2",
                        )}
                    >
                        <div className="flex w-full justify-between">
                            <ArrowRightSquare size={18} />
                        </div>
                    </Link>
                </div>
            </div>

            <Separator />
        </div>
    );
}