import React from 'react';
import { View, Text } from 'react-native';
import Svg, { Circle } from 'react-native-svg';

import { COLORS } from '../constants/color';
import { styles } from '../styles/SiteHealthCardStyles';
import Card from '../utils/card';

export default function SiteHealthCard() {
  return (
    <Card style={styles.card}>

      {/* Circle */}
      <View style={styles.circleContainer}>

        <Svg width={120} height={120} viewBox="0 0 100 100">

          <Circle
            cx="50"
            cy="50"
            r="40"
            stroke={COLORS.cardBorder}
            strokeWidth={8}
            fill="none"
          />

          <Circle
            cx="50"
            cy="50"
            r="40"
            stroke={COLORS.green}
            strokeWidth={8}
            strokeDasharray="251"
            strokeDashoffset="60"
            strokeLinecap="round"
            fill="none"
          />

        </Svg>

        <Text style={styles.circleText}>
          SITE HEALTH
        </Text>

      </View>

      {/* Right Side Data */}
      <View style={styles.details}>

        <View style={styles.row}>
          <Text style={styles.label}>Assets online</Text>
          <Text style={styles.value}>
            <Text style={styles.bold}>242</Text> / 251
          </Text>
        </View>

        <View style={styles.row}>
          <Text style={styles.label}>Active alarms</Text>
          <Text style={[styles.value, { color: COLORS.red }]}>
            3 critical
          </Text>
        </View>

        <View style={styles.row}>
          <Text style={styles.label}>Energy today</Text>
          <Text style={styles.value}>
            <Text style={styles.bold}>4,218</Text> kWh
          </Text>
        </View>

        <View style={styles.row}>
          <Text style={styles.label}>vs yesterday</Text>
          <Text style={[styles.value, { color: COLORS.green }]}>
            -6.2%
          </Text>
        </View>

      </View>

    </Card>
  );
}