import {
  View,
  Text,
  TouchableOpacity,
  SafeAreaView,
  FlatList,
} from "react-native";
import React, { useRef, useEffect, useState } from "react";
import { Props } from "./BuyCredit.types";
import { styles } from "./BuyCredit.styles";

const Data = [
  { id: 1, title: "12 Campaigns/no" },
  { id: 2, title: "12 Campaigns/no" },
  { id: 3, title: "12 Campaigns/no" },
  { id: 4, title: "12 Campaigns/no" },
  { id: 5, title: "12 Campaigns/no" },
  { id: 6, title: "12 Campaigns/no" },
  { id: 7, title: "12 Campaigns/no" },
];
export default function BuyCredit(Props: Props) {
  return (
    <View>
      <View style={[styles.BoxContainer, Props.BuyCreditContainerStyle]}>
        <View style={styles.HeadingView}>
          <Text style={[styles.HeadingText, Props.HeadingText]}>Heading</Text>
        </View>

        <View style={[styles.BoxDescription, Props.BoxDescription]}>
          <Text style={[styles.DescriptionText, Props.DescriptionText]}>
            Deaiongonaungoanjdgounoaengnvoalvneuonoignvsodgnonsjdonbujonsonvboandojbnjdanugnr
          </Text>
        </View>

        <View style={[styles.BtnView, Props.BtnView]}>
          <TouchableOpacity style={[styles.BtnContainer, Props.BtnContainer]}>
            <Text style={[styles.BtnText, Props.BtText]}>Buy Credit</Text>
          </TouchableOpacity>
        </View>

        <View style={[styles.Line, Props.Line]} />

        <View style={[styles.Features, Props.Features]}>
          <Text style={[styles.FeatureText, Props.FeatureText]}>FEATURES</Text>
        </View>

        <View style={[styles.ListView, Props.ListView]}>
          <FlatList
            data={Data}
            renderItem={({ item }) => (
              <Text style={[styles.ListText, Props.ListText]}>
                {item.title}
              </Text>
            )}
            keyExtractor={(item) => item.id + ""}
          />
        </View>
      </View>
    </View>
  );
}