import React from 'react';
import { Grid, Typography } from '@mui/material';
import { FuelLogForm } from '../components/FuelLogForm';
import { FuelLogsList } from '../components/FuelLogsList';
import { useFuelLogs } from '../hooks/useFuelLogs';
import { FuelStatsCard } from '../components/FuelStatsCard';

export const FuelLogsPage: React.FC = () => {
  const { fuelLogs } = useFuelLogs();

  return (
    <Grid container spacing={2}>
      <Grid item xs={12} md={6}>
        <FuelLogForm />
      </Grid>
      <Grid item xs={12} md={6}>
        <Typography variant="h6" gutterBottom>Recent Fuel Logs</Typography>
        <FuelLogsList logs={fuelLogs} />
        <Typography variant="h6" sx={{ mt: 3 }} gutterBottom>Summary</Typography>
        <FuelStatsCard logs={fuelLogs} />
      </Grid>
    </Grid>
  );
};