import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet } from 'react-native';
import HealthDataCard from './HealthDataCard';

interface HeartRateCardProps {
  resetToken: number;
  style?: object;
  heartRate?: number | null;
}

const HeartRateCard: React.FC<HeartRateCardProps> = ({
  resetToken,
  style,
  heartRate
}) => {
  const heartIcon = (
    <Ionicons name="heart" size={24} color="#EF4444" />
  );

  return (
    <HealthDataCard
      title="心率"
      value={heartRate !== null && heartRate !== undefined ? Math.round(heartRate).toString() : '--'}
      unit="bpm"
      icon={heartIcon}
      style={style}
    />
  );
};

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

export default HeartRateCard;