import * as React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";

type FooterItemProps = {
  label: string;
  icon: string;
};

const FooterItem = ({ label, icon }: FooterItemProps) => (
  <TouchableOpacity style={styles.footerItem}>
    <Text style={styles.footerItemText}>{label}</Text>
    <Image
      source={{ uri: icon }}
      style={styles.footerItemIcon}
      resizeMode="contain"
    />
  </TouchableOpacity>
);

const Footer = () => {
  return (
    <View style={styles.container}>
      <View style={styles.spacer} />
      <View style={styles.content}>
        <FooterItem
          label="Về chúng tôi"
          icon="https://cdn.builder.io/api/v1/image/assets/TEMP/0f5cda0be55412240422e2274330e3f6e64023d3?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756"
        />
        <FooterItem
          label="Tuyển dụng"
          icon="https://cdn.builder.io/api/v1/image/assets/TEMP/0f5cda0be55412240422e2274330e3f6e64023d3?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756"
        />
        <FooterItem
          label="Liên kết"
          icon="https://cdn.builder.io/api/v1/image/assets/TEMP/0f5cda0be55412240422e2274330e3f6e64023d3?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756"
        />
        <FooterItem
          label="Giới thiệu"
          icon="https://cdn.builder.io/api/v1/image/assets/TEMP/5263024b89e68e21be091071a684ede939b2cbf7?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756"
        />
        <Image
          source={{
            uri: "https://cdn.builder.io/api/v1/image/assets/TEMP/e7727a56c76a2e7c02cd1646e68e8b20cefb30e1?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756",
          }}
          style={styles.logo}
          resizeMode="contain"
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignSelf: "stretch",
    marginTop: 28,
    width: "100%",
    paddingBottom: 21,
  },
  spacer: {
    display: "flex",
    minHeight: 10,
    width: "100%",
  },
  content: {
    marginTop: 17,
    width: "100%",
    paddingLeft: 10,
    paddingRight: 10,
  },
  footerItem: {
    borderRadius: 4,
    display: "flex",
    paddingLeft: 9,
    paddingRight: 9,
    paddingTop: 6,
    paddingBottom: 13,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 8,
  },
  footerItemText: {
    color: "#444",
    fontFamily: "Shopee Display, -apple-system, Roboto, Helvetica, sans-serif",
    fontSize: 13,
    fontWeight: "700",
  },
  footerItemIcon: {
    width: 11,
    height: 6,
    marginTop: 7,
  },
  logo: {
    width: 95,
    height: 40,
    marginTop: 17,
    marginLeft: 10,
  },
});

export default Footer;