import React, { useState } from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import StoreItem from "./StoreItem";

const stores = [
  {
    name: "Hanoicomputer - Công cổ phần máy tính Hà Nội",
    logo: require("../../../assets/images/lienkien-ram.png"),
    description: "Chuyên mua bán trao đổi PC, laptop, linh phụ kiện máy tính",
    address: "198 Nguyễn Thị Minh Khai, P.6, Q.3, TP.HCM",
    googleMap: "https://goo.gl/maps/xxx",
    tel: "1800 6867 - 1800 6865",
    website: "https://hacom.com.vn",
    reviewCount: 47,
    rate: 5,
    showrooms: 7,
  },
  {
    name: "Hanoicomputer - Công cổ phần máy tính Hà Nội",
    logo: require("../../../assets/images/lienkien-ram.png"),
    description: "Chuyên mua bán trao đổi PC, laptop, linh phụ kiện máy tính",
    address: "198 Nguyễn Thị Minh Khai, P.6, Q.3, TP.HCM",
    googleMap: "https://goo.gl/maps/xxx",
    tel: "1800 6867 - 1800 6865",
    website: "https://hacom.com.vn",
    reviewCount: 47,
    rate: 5,
    showrooms: 7,
  },
];

type Props = {
  onShowReview: () => void;
  onShowListShowroom: () => void;
  onShowListReview: () => void;
};

export default function StoreList({
  onShowReview,
  onShowListShowroom,
  onShowListReview,
}: Props) {
  return (
    <ScrollView style={styles.wrapper}>
      {stores.map((item, index) => (
        <StoreItem
          key={index}
          store={item}
          onShowReview={onShowReview}
          onShowListShowroom={onShowListShowroom}
          onShowListReview={onShowListReview}
        />
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: "#fff",
    paddingTop: 10,
    paddingBottom: 10,
  },
});
