import React, { PropsWithChildren } from "react";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";

type DashboardPageProps = PropsWithChildren<{
    back?: string;
    title?: string;
    description?: string;
}>;

export const DashboardLayout: React.FC<DashboardPageProps> = (props) => {
    const {
        back,
        title,
        description,
        children
    } = props;

    return (
        <div className="p-4 md:px-6">
            <div className="flex items-center space-x-4 pb-4">
                {back && (
                    <Button asChild variant="ghost" size="icon">
                        <Link href={back}>
                            <ArrowLeft className="w-4 h-4" />
                        </Link>
                    </Button>
                )}

                <div className="min-w-0">
                    {title && (
                        <h1 className="text-2xl font-bold">{title}</h1>
                    )}

                    {description && (
                        <p className="text-muted-foreground">{description}</p>
                    )}
                </div>
            </div>

            <div>
                {children}
            </div>
        </div>
    );
};