import { CirclePlus, SquarePen } from "lucide-react";
import ReloadButton from "./ReloadButton";
import LinkButton, { EditButton, ViewButton } from "./LinkButton";
import { Alert } from "./Alert";
import { cn } from "@/lib/utils";


export default function IndexPageLayout({ title, description, headerButtons, reload, children, path, add, mode, id, className }: { title: string, description?: string, headerButtons?: React.ReactNode, reload?: () => void, children: React.ReactNode, id?: number, path?: string, add?: string | boolean, mode?: "view" | "create" | "edit", className?: string }) {
    return (
        <>
            <div className={cn("min-h-screen space-y-4 p-4  bg-linear-to-br bg-white dark:bg-[#171717] from-white via-neutral-600/5 to-white dark:from-black/60 dark:via-blue-950/40 dark:to-black  bg-fixed", className)}>
                <div className="flex w-full justify-between items-start ">
                    <div className="flex-1">
                        <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100 flex justify-start items-center gap-4">{mode === 'view' ? `${title} #${id}` : (mode === 'edit' ? <><SquarePen className="w-5 h-5 text-blue-600 hidden" /> Edit {title} #{id}</> : mode === 'create' ? `Create New ${title}` : title)}</h1>
                        {description &&
                            <p className="text-gray-600 dark:text-gray-400 text-sm">
                                {description}
                            </p>
                        }
                    </div>
                    <div className="flex gap-4 justify-end items-start">
                        <ReloadButton reload={reload} />
                        {/* {mode === 'view' && <LinkButton href={`${path}/${id}/edit`} icon="SquarePen" className="text-blue-600" />} */}
                        {mode === 'view' && <EditButton path={path} id={id} />}
                        {mode === 'edit' && <ViewButton path={path} id={id} />}
                        {(mode === 'edit' || mode === 'view' || add) && <LinkButton href={`${path}/create`} ><CirclePlus className=" h-4 w-4" /> Add New {((typeof add) === 'string' ? add : null)} </LinkButton>}

                        {headerButtons}
                    </div>
                </div>
                {children}
            </div>
            {/* <Alert /> */}
        </>
    )
}
