import { Ionicons } from '@expo/vector-icons';
import React, { useEffect, useState } from 'react';
import { StyleSheet } from 'react-native';
import HealthDataService from '../../services/healthData';
import HealthDataCard from './HealthDataCard';

interface OxygenSaturationCardProps {
  resetToken: number;
  style?: object;
}

const OxygenSaturationCard: React.FC<OxygenSaturationCardProps> = ({
  resetToken,
  style
}) => {
  const [oxygenSaturation, setOxygenSaturation] = useState<number | null>(null);

  useEffect(() => {
    const fetchOxygenSaturation = async () => {
      const data = await HealthDataService.getOxygenSaturation();
      setOxygenSaturation(data);
    };

    fetchOxygenSaturation();
  }, [resetToken]);

  const oxygenIcon = (
    <Ionicons name="water" size={24} color="#3B82F6" />
  );

  return (
    <HealthDataCard
      title="血氧饱和度"
      value={oxygenSaturation !== null ? oxygenSaturation.toString() : '--'}
      unit="%"
      icon={oxygenIcon}
      style={style}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default OxygenSaturationCard;