import { redirect } from "next/navigation";
import { Separator } from "@/components/ui/separator";
import { api } from "@/server/api/client";
import { getServerAuthSession } from "@/server/auth";
import { ZDay } from "@lifetracker/shared/types/days";
import EditableDayComment from "./EditableDayComment";
import { MoodStars } from "./MoodStars";
import { format } from "date-fns";

export default async function DayView({
    day,
    header,
    showDivider,
    showEditorCard = false,
}: {
    day: ZDay;
    header?: React.ReactNode;
    showDivider?: boolean;
    showEditorCard?: boolean;
}) {
    const session = await getServerAuthSession();
    if (!session) {
        redirect("/");
    }

    return (
        <div className="flex flex-col gap-3">

            <div className="flex justify-between">
                <span className="text-2xl">
                    {format(day.date, "EEEE, MMMM do")}
                </span>
                <div>
                    <MoodStars
                        day={day}
                    />
                </div>
            </div>

            <Separator />

            <EditableDayComment day={day}
                className="text-xl"
            />

            <Separator />



        </div>
    );
}