import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

interface SleepCardProps {
  sleepDuration?: number | null;
  style?: object;
  onPress?: () => void;
}

const SleepCard: React.FC<SleepCardProps> = ({
  sleepDuration,
  style,
  onPress
}) => {
  const formatSleepDuration = (duration: number): string => {
    const hours = Math.floor(duration / 60);
    const minutes = Math.floor(duration % 60);
    return `${hours}小时${minutes}分钟`;
  };

  const CardContent = (
    <View style={[styles.container, style]}>
      <View style={styles.cardHeaderRow}>
        <Text style={styles.cardTitle}>睡眠</Text>
      </View>
      <Text style={styles.sleepValue}>
        {sleepDuration != null ? formatSleepDuration(sleepDuration) : '——'}
      </Text>
    </View>
  );

  if (onPress) {
    return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
        {CardContent}
      </TouchableOpacity>
    );
  }

  return CardContent;
};

const styles = StyleSheet.create({
  container: {
    // Container styles will be inherited from parent (FloatingCard)
  },
  cardHeaderRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  cardTitle: {
    fontSize: 14,
    color: '#192126',
  },
  sleepValue: {
    fontSize: 16,
    color: '#1E40AF',
    fontWeight: '700',
    marginTop: 8,
  },
});

export default SleepCard;