import {
  View,
  TouchableOpacity,
  Image as NativeImage,
  Text,
} from "react-native";
import React from "react";
import { Icon } from "@rneui/themed";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function NoticeItem({ leftIcon, hasLink }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  return (
    <View>
      <View style={tailwind("flex flex-row")}>
        {/* 头像 */}
        <View
          style={{
            ...tailwind(
              "flex justify-center items-center rounded-full p-2 mr-2"
            ),
            width: 42,
            height: 42,
            backgroundColor: "#ffffff1a",
          }}
        >
          {/* <Icon type="ionicon" name="megaphone" size={24} color="white" /> */}
          {leftIcon}
        </View>
        <View style={tailwind("flex-1")}>
          {/* 内容 */}
          <View>
            {/* 文本内容 */}
            <View>
              <Text style={tailwind("text-base text-white font-medium mr-2")}>
                您的个人资料已审核通过。
              </Text>
            </View>
            {/* 链接跳转 */}
            {hasLink && (
              <TouchableOpacity
                onPressIn={() => {}}
                style={{
                  ...tailwind("rounded-xl p-2 flex flex-row items-center my-2"),
                  backgroundColor: "#ffffff1a",
                }}
              >
                <View
                  style={{
                    ...tailwind("mr-2 bg-white rounded-lg"),
                    width: 50,
                    height: 50,
                  }}
                >
                  {/* <NativeImage
                    // style={{ transform: [{ scale: 0.9 }] }}
                    width={120}
                    height={120}
                    source={require("../../../assets/icon.png")}
                  /> */}
                </View>
                <View
                  style={{
                    ...tailwind("flex flex-row justify-between flex-1 px-4"),
                    alignItems: "center",
                  }}
                >
                  <Text
                    style={tailwind("text-base text-white font-medium mr-2")}
                  >
                    {hasLink.text}
                  </Text>
                  <TouchableOpacity onPress={() => {}}>
                    <Icon
                      type="ionicon"
                      name="chevron-forward"
                      color="white"
                      size={24}
                    />
                  </TouchableOpacity>
                </View>
              </TouchableOpacity>
            )}
          </View>
          {/* 时间 */}
          <View>
            <Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
              11:00
            </Text>
          </View>
        </View>
      </View>
      <View
        style={{
          ...tailwind("my-4"),
          height: 1,
          width: "100%",
          backgroundColor: "#ffffff1a",
        }}
      ></View>
    </View>
  );
}