import React from 'react';
import PageHeader from '../../common/components/PageHeader';
import { motion } from 'framer-motion';

interface DashboardLayoutProps {
    title: string;
    subtitle?: string;
    actions?: React.ReactNode;
    children: React.ReactNode;
    maxWidth?: string;
    backAction?: React.ReactNode;
}

const DashboardLayout: React.FC<DashboardLayoutProps> = ({
    title,
    subtitle,
    actions,
    children,
    maxWidth = 'max-w-7xl',
    backAction
}) => {
    return (
        <div className="p-4 md:p-8">
            <div className={`${maxWidth} mx-auto`}>
                {backAction && (
                    <motion.div
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
                        className="mb-4"
                    >
                        {backAction}
                    </motion.div>
                )}

                <PageHeader
                    title={title}
                    subtitle={subtitle}
                    actions={actions}
                />

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

export default DashboardLayout;