import {
  View,
  Text,
  TouchableOpacity,
  Image as NativeImage,
} from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";
import { Image } from "expo-image";
import { useNavigation } from "@react-navigation/native";

const placeholder = "https://via.placeholder.com/1024x1024.png";

export default function SpaceCard({ data }) {
  const navigation = useNavigation();
  const tailwind = useTailwind();
  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

  return (
    <TouchableOpacity
      activeOpacity={1}
      onPress={() => navigation.navigate("StreamerSpace")}
      style={tailwind("w-full px-1 mt-2")}
    >
      <View style={tailwind("flex flex-col rounded-lg overflow-hidden")}>
        <Image
          source={placeholder}
          contentFit="cover"
          transition={1000}
          placeholder={blurhash}
          cachePolicy="disk"
          style={{ aspectRatio: "1/1", ...tailwind("w-full z-0") }}
        />
        <NativeImage
          style={{ right: 2, ...tailwind("absolute top-0") }}
          source={require("../../assets/icon/others/space_new.png")}
        />
        <View
          style={{
            height: 42,
            ...tailwind(
              "flex flex-row w-full items-center px-2.5 bg-[#FFFFFF1A]"
            ),
          }}
        >
          <Text
            style={tailwind("shrink text-white text-sm font-medium")}
            numberOfLines={1}
            ellipsizeMode="tail"
          >
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
          </Text>
          <NativeImage
            style={tailwind("ml-1")}
            source={require("../../assets/icon/others/pay_space.png")}
          />
        </View>
      </View>
    </TouchableOpacity>
  );
}