import React from 'react';
import { Typography } from '@mui/material';
import { UnitSystem } from '../types/fuel-logs.types';

export const UnitSystemDisplay: React.FC<{ unitSystem?: UnitSystem; showLabel?: string }> = ({ unitSystem, showLabel }) => {
  if (!unitSystem) return null;
  const label = unitSystem === 'imperial' ? 'Imperial (miles, gallons, MPG)' : 'Metric (km, liters, L/100km)';
  return (
    <Typography variant="caption" color="text.secondary">
      {showLabel ? `${showLabel} ` : ''}{label}
    </Typography>
  );
};
