/**
 * @ai-summary Dialog wrapper for FuelLogForm to create new fuel logs
 */

import React from 'react';
import { Dialog, DialogTitle, DialogContent, IconButton, useMediaQuery } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { FuelLogForm } from './FuelLogForm';

interface AddFuelLogDialogProps {
  open: boolean;
  onClose: () => void;
}

export const AddFuelLogDialog: React.FC<AddFuelLogDialogProps> = ({ open, onClose }) => {
  const isSmallScreen = useMediaQuery('(max-width:600px)');

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      fullScreen={isSmallScreen}
      PaperProps={{
        sx: { maxHeight: isSmallScreen ? '100%' : '90vh' },
      }}
    >
      <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        Log Fuel
        <IconButton
          aria-label="close"
          onClick={onClose}
          sx={{ minWidth: 44, minHeight: 44 }}
        >
          <CloseIcon />
        </IconButton>
      </DialogTitle>
      <DialogContent sx={{ p: { xs: 1, sm: 2 } }}>
        <FuelLogForm onSuccess={onClose} />
      </DialogContent>
    </Dialog>
  );
};
