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

interface MetricCardProps {
  heading: string;
  value: number | null;
  unit: string;
}

const MetricCard: React.FC<MetricCardProps> = ({ heading, value, unit }) => {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.heading}>{heading}</Text>
        <Text style={styles.value}>
          {value?.toFixed(2) ?? "---"} {unit}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "48%",
    height: 68,
    backgroundColor: "#FCFCFC",
    borderRadius: 8,
    padding: 12,
    justifyContent: "center",
  },
  textContainer: {
    flexDirection: "column",
    justifyContent: "flex-start",
    gap: 8,
  },
  heading: {
    fontSize: 12,
    lineHeight: 16,
    color: "#565F70",
    fontFamily: "Inter-Medium",
  },
  value: {
    fontSize: 14,
    lineHeight: 20,
    color: "#252A34",
    fontFamily: "Inter-SemiBold",
  },
});

export default MetricCard;