import { useTranslations } from "@/providers/TranslationProviders";
import { Linking, Pressable, Text, View } from "react-native";
import { PlayCircleIcon } from "phosphor-react-native";
import ImageLoader from "@/components/ui/ImageLoader";


export default function PropertyVideo({ videoUrl, thumbnail }: { videoUrl?: string | null; thumbnail?: string }) {
  const { tran } = useTranslations();

  return (
    <View className="mb-8">
      <View className="flex-row items-center justify-between mb-4 border-b border-slate-100 pb-4">
        <Text className="text-xl font-manrope-extrabold text-slate-900">{tran("Property Video")}</Text>
      </View>
      {videoUrl ? (
        <Pressable onPress={() => Linking.openURL(videoUrl)} className="w-full h-[200px] rounded-2xl overflow-hidden bg-slate-900 justify-center items-center relative">
          {thumbnail && <ImageLoader src={thumbnail} width={400} height={200} className="absolute inset-0 w-full h-full opacity-60" />}
          <View className="w-14 h-14 rounded-full bg-white/30 items-center justify-center shadow-lg">
             <PlayCircleIcon size={36} color="white" weight="fill" />
          </View>
        </Pressable>
      ) : (
        <View className="h-40 rounded-2xl bg-slate-50 border-2 border-dashed border-slate-200 items-center justify-center p-6">
          <Text className="text-2xl mb-2 opacity-40">🚫</Text>
          <Text className="text-sm font-manrope-bold text-slate-400">{tran("No Video Available")}</Text>
          <Text className="text-xs font-manrope-medium text-slate-400 text-center mt-1">{tran("Video content will be displayed here once available")}</Text>
        </View>
      )}
    </View>
  );
}
