import React from "react";
import { View, Text, Image, StyleSheet, Dimensions } from "react-native";
const { width } = Dimensions.get("window");

interface LocationButtonProps {
  title: string;
}

const LocationButton: React.FC<LocationButtonProps> = ({ title }) => {
  return (
    <View style={styles.locationButton}>
      <Image
        source={require("../../../assets/images/icon-map-2.png")}
        style={styles.locationIcon}
      />
      <Text style={styles.locationText}>{title}</Text>
    </View>
  );
};

export default function LocationFilters() {
  const locations = [
    {
      title: "Hà Nội",
    },
    {
      title: "TP.HCM",
    },
    {
      title: "Hải Phòng",
    },
    {
      title: "Huế",
    },
    {
      title: "Đà Nẵng",
    },
    {
      title: "Cần Thơ",
    },
    {
      title: "Quảng Ninh",
    },
    {
      title: "Cao Bằng",
    },
    {
      title: "Lào Cai",
    },
    {
      title: "Sơn La",
    },
    {
      title: "Lạng Sơn",
    },
    {
      title: "Hưng Yên",
    },
    {
      title: "Ninh Bình",
    },
    {
      title: "Hà Tĩnh",
    },
    {
      title: "Thanh Hoá",
    },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tìm theo tỉnh thành</Text>
      <View style={styles.locationRow}>
        {locations.map((location, index) => (
          <LocationButton key={index} title={location.title} />
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 1,
    borderColor: "rgba(240, 240, 240, 1)",
    paddingTop: 12,
    paddingHorizontal: 10,
    paddingBottom: 21,
    marginTop: 12,
  },
  title: {
    fontSize: 20,
    fontWeight: "700",
    color: "rgba(0, 0, 0, 1)",
    textAlign: "center",
  },
  locationRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
    marginTop: 8,
  },
  locationButton: {
    flexDirection: "row",
    alignItems: "center",
    gap: 5,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: "rgba(227, 227, 227, 1)",
    padding: 5,
    minHeight: 32,
    width: width / 3 - 20,
  },
  locationIcon: {
    width: 20,
    height: 20,
    resizeMode: "contain",
  },
  locationText: {
    fontSize: 13,
    fontWeight: "400",
    color: "rgba(89, 89, 89, 1)",
    textAlign: "center",
  },
});
