import React from 'react';
import { Box, Paper, Typography } from '@mui/material';

export interface FormLayoutProps {
  children: React.ReactNode;
  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
  actions?: React.ReactNode;
  title?: string;
}

/** Standard form page wrapper with Paper, optional title, and action slot. */
export const FormLayout: React.FC<FormLayoutProps> = ({
  children,
  onSubmit,
  actions,
  title,
}) => {
  return (
    <Paper sx={{ p: 3 }}>
      {title && (
        <Typography variant="h6" sx={{ mb: 2 }}>
          {title}
        </Typography>
      )}
      <Box
        component={onSubmit ? 'form' : 'div'}
        onSubmit={onSubmit}
        sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
      >
        {children}
        {actions && (
          <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1 }}>
            {actions}
          </Box>
        )}
      </Box>
    </Paper>
  );
};
