/**
 * @ai-summary Badge for community-verified 93 octane stations
 */

import React from 'react';
import {
  Box,
  Chip,
} from '@mui/material';
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';

interface CommunityVerifiedBadgeProps {
  has93Octane: boolean;
  has93OctaneEthanolFree: boolean;
}

/**
 * Badge showing that a station has been community-verified for 93 octane
 * Displays verification status and ethanol-free indicator if applicable
 */
export const CommunityVerifiedBadge: React.FC<CommunityVerifiedBadgeProps> = ({
  has93Octane,
  has93OctaneEthanolFree,
}) => {
  if (!has93Octane) {
    return null;
  }

  return (
    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
      <Chip
        icon={<LocalFireDepartmentIcon />}
        label="93 Verified"
        size="small"
        color="success"
        variant="filled"
        sx={{
          fontWeight: 500,
          minHeight: '32px',
        }}
      />
      {has93OctaneEthanolFree && (
        <Chip
          label="Ethanol Free"
          size="small"
          variant="outlined"
          sx={{
            minHeight: '32px',
          }}
        />
      )}
    </Box>
  );
};

export default CommunityVerifiedBadge;
