import React from 'react';
import { Card, CardContent, Typography, Box, Chip } from '@mui/material';
import { useUnits } from '../../../core/units/UnitsContext';

interface Props {
  fuelUnits?: number;
  costPerUnit?: number;
  calculatedCost: number;
}

export const CostCalculator: React.FC<Props> = ({ fuelUnits, costPerUnit, calculatedCost }) => {
  const { unitSystem, currencySymbol } = useUnits();
  const unitLabel = unitSystem === 'imperial' ? 'gallons' : 'liters';
  
  // Ensure we have valid numbers
  const safeUnits = typeof fuelUnits === 'number' && !isNaN(fuelUnits) ? fuelUnits : 0;
  const safeCostPerUnit = typeof costPerUnit === 'number' && !isNaN(costPerUnit) ? costPerUnit : 0;
  const safeCost = typeof calculatedCost === 'number' && !isNaN(calculatedCost) ? calculatedCost : 0;
  
  if (!fuelUnits || !costPerUnit || safeUnits <= 0 || safeCostPerUnit <= 0) {
    return (
      <Card variant="outlined"><CardContent><Typography variant="body2" color="text.secondary">Enter fuel amount and cost per unit to see total cost.</Typography></CardContent></Card>
    );
  }
  return (
    <Card variant="outlined">
      <CardContent>
        <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
          <Typography variant="body2" color="text.secondary">Cost Calculation</Typography>
          <Chip label="Real-time" size="small" color="primary" variant="outlined" />
        </Box>
        <Box display="flex" justifyContent="space-between" alignItems="center">
          <Typography variant="body2">{safeUnits.toFixed(3)} {unitLabel} x {currencySymbol}{safeCostPerUnit.toFixed(3)}</Typography>
          <Typography variant="h6" color="primary.main" fontWeight={700}>{currencySymbol}{safeCost.toFixed(2)}</Typography>
        </Box>
      </CardContent>
    </Card>
  );
};

