import { View, Text, Image, TouchableOpacity } from "react-native";
import React from "react";
import { Props } from "./GamifiedStreak.type";
import { styles } from "./GamifiedStreak.styles";
export default function GamifiedStreak(Props: Props) {
  return (
    <View
      style={{
        flexDirection: "row",
        flexWrap: "wrap",
      }}
    >
      <TouchableOpacity
        style={{
          backgroundColor: "gray",
          padding: 20,
          width: 170,

          borderRadius: 20,
          marginLeft: 10,
          marginVertical: 20,
        }}
      >
        <Text style={{ fontSize: 30, fontWeight: "bold" }}>200</Text>
        <Text>Active Days</Text>
        <View style={{ alignItems: "flex-end", marginTop: 60 }}>
          <Image
            source={require("../../assets/Clash.png")}
            style={{ width: 100, height: 100, borderRadius: 20 }}
          />
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={{
          backgroundColor: "lightblue",
          padding: 20,
          width: 170,
          borderRadius: 20,
          marginLeft: 10,
          marginVertical: 20,
          alignItems: "center",
        }}
      >
        <View
          style={{
            alignItems: "center",
            marginBottom: 60,
          }}
        >
          <Image
            source={require("../../assets/Clash.png")}
            style={{ width: 50, height: 60, borderRadius: 10 }}
          />
        </View>
        <Text style={{ fontSize: 30, fontWeight: "bold" }}>200</Text>
        <Text>Total Sessions</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={{
          backgroundColor: "lightblue",
          padding: 20,
          width: 170,
          borderRadius: 20,
          marginLeft: 10,
          marginVertical: 20,
          alignItems: "center",
        }}
      >
        <View
          style={{
            alignItems: "center",
            marginBottom: 60,
          }}
        >
          <Image
            source={require("../../assets/Clash.png")}
            style={{ width: 50, height: 60, borderRadius: 10 }}
          />
        </View>
        <Text style={{ fontSize: 30, fontWeight: "bold" }}>200</Text>
        <Text>Total Sessions</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={{
          backgroundColor: "gray",
          padding: 20,
          width: 170,

          borderRadius: 20,
          marginLeft: 10,
          marginVertical: 20,
        }}
      >
        <Text style={{ fontSize: 30, fontWeight: "bold" }}>200</Text>
        <Text>Active Days</Text>
        <View style={{ alignItems: "flex-end", marginTop: 60 }}>
          <Image
            source={require("../../assets/Clash.png")}
            style={{ width: 100, height: 100, borderRadius: 20 }}
          />
        </View>
      </TouchableOpacity>
    </View>
  );
}