import React from "react";
import { Platform, Text, useWindowDimensions, View } from "react-native";
import { Image } from "expo-image";
import { BlurView } from "expo-blur";
import { gutters, Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import palette from "../../../styles/Palette";

export default function PersonaCard({ item, isLock = false, height }) {
  const { height: windowHeight } = useWindowDimensions();
  const baseHeight = Math.max(height ?? windowHeight, 1);
  const cardHeight = Platform.OS === "web" ? Math.round(baseHeight) : baseHeight;

  return (
    <View
      style={{
        justifyContent: "center",
        alignItems: "center",
        height: cardHeight,
      }}
    >
      <View
        style={{
          borderRadius: 10,
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
        }}
      >
        <Image
          source={item.image}
          style={{ height: 190, width: "100%" }}
          contentFit="contain"
        />
        <BlurView
          intensity={30}
          tint="dark"
          style={{
            borderRadius: 20,
            paddingVertical: 20,
            paddingHorizontal: gutters,
            overflow: "hidden",
            width: "100%",
          }}
        >
          <Text
            style={{
              fontSize: 18,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterSemiBold,
              marginBottom: 15,
            }}
          >
            {item.title}
          </Text>
          <Text
            style={{
              fontSize: 12,
              lineHeight: 20,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterRegular,
            }}
          >
            {item.description}
          </Text>
          {isLock && (
            <View
              pointerEvents="none"
              style={{
                position: "absolute",
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                borderRadius: 20,
                justifyContent: "center",
                alignItems: "center",
                backgroundColor: "rgba(0,0,0,0.2)",
              }}
            >
              <View
                style={{
                  width: 36,
                  height: 36,
                  borderRadius: 18,
                  backgroundColor: "rgba(0,0,0,0.4)",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <FontAwesome name="lock" size={24} color={palette.primary} />
              </View>
            </View>
          )}
        </BlurView>
      </View>
    </View>
  );
}