/**
 * @ai-summary Compact action bar for dashboard with Add Vehicle and Log Fuel buttons
 */

import React from 'react';
import Button from '@mui/material/Button';
import Add from '@mui/icons-material/Add';
import LocalGasStation from '@mui/icons-material/LocalGasStation';

interface ActionBarProps {
  onAddVehicle: () => void;
  onLogFuel: () => void;
}

export const ActionBar: React.FC<ActionBarProps> = ({ onAddVehicle, onLogFuel }) => {
  return (
    <div className="flex flex-row gap-2 items-center">
      <Button
        variant="contained"
        size="small"
        startIcon={<Add />}
        onClick={onAddVehicle}
        sx={{ minHeight: 44 }}
      >
        Add Vehicle
      </Button>
      <Button
        variant="outlined"
        size="small"
        startIcon={<LocalGasStation />}
        onClick={onLogFuel}
        sx={{ minHeight: 44 }}
      >
        Log Fuel
      </Button>
    </div>
  );
};
