import React from "react";
import {
  StyleSheet,
  AppRegistry,
  Text,
  View,
  Image,
  TouchableOpacity,
} from "react-native";
import ProductList from "../../components/main/home/ProductList";
import TopCategories from "../../components/main/home/TopCategories";
import SwiperCon from "../../components/main/home/Swiper";
import Header from "../../components/main/Header";
import { useNavigation } from "@react-navigation/native";
import TopShops from "../../components/main/home/TopShops";
import ShopList from "../../components/main/home/ShopList";
const Home = ({ tab }) => {
  const navigation = useNavigation();
  return (
    <View style={styles.container}>
      <View style={styles.header} onPress={() => navigation.navigate("Search")}>
        <Header />
      </View>
      <View style={styles.wrapper}>
        <SwiperCon />
      </View>
      {tab === "prod" ? (
        <>
          <TopCategories />
          <ProductList />
        </>
      ) : (
        <>
          <TopShops />
          <ShopList />
        </>
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    // alignItems: "center",
    // justifyContent: "center",
    width: "100%",
    // height: "87%",
    // paddingTop:15
  },
  wrapper: {
    width: "100%",
    height: 150,
    alignItems: "center",
    justifyContent: "center",
    // backgroundColor: "#ffaa00",
  },
  header: {
    position: "fixed",
    width: "100%",
    top: 0,
    marginBottom: 5,
  },
  img: {
    width: 400,
    height: 200,
    resizeMode: "cover",
    margin: "auto",
    borderRadius: 10,
    // backgroundColor: "#ffaa00",
  },
  tabs: {
    height: 80,
    width: "100%",
    position: "absolute",
    bottom: 100,
  },
  tab: {},
});
export default Home;