import React from 'react';
import { Box, Button, CircularProgress } from '@mui/material';
import { WidgetCard } from './WidgetCard';

export interface FormCardProps {
  title: string;
  icon?: React.ReactNode;
  isSubmitting?: boolean;
  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
  submitLabel?: string;
  children: React.ReactNode;
}

/** Quick-action form widget built on WidgetCard. */
export const FormCard: React.FC<FormCardProps> = ({
  title,
  icon,
  isSubmitting = false,
  onSubmit,
  submitLabel = 'Erstellen',
  children,
}) => {
  return (
    <WidgetCard title={title} icon={icon}>
      <Box
        component="form"
        onSubmit={onSubmit}
        sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}
      >
        {children}
        <Box display="flex" justifyContent="flex-end" mt={0.5}>
          <Button
            type="submit"
            variant="contained"
            disabled={isSubmitting}
            startIcon={isSubmitting ? <CircularProgress size={16} color="inherit" /> : undefined}
          >
            {submitLabel}
          </Button>
        </Box>
      </Box>
    </WidgetCard>
  );
};
