import { View, Text, Image, Pressable, Platform } from "react-native";
import React from "react";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { icons, img } from "../assets";
import { size } from "../styles/Style";
import { BlurView } from "expo-blur";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import Carousel from "react-native-reanimated-carousel";

const Playbacks = () => {
  return (
    <View style={{ flex: 1 }}>
      <Carousel
        data={Array.from({ length: 5 })}
        vertical
        height={responsiveHeight(100)}
        renderItem={() => (
          <View
            style={{
              height: responsiveHeight(100),
              position: "relative",
            }}
          >
            <Image
              source={img.placeholder3}
              style={{ width: "100%", height: "100%" }}
            />
            <View
              style={{
                position: "absolute",
                width: "100%",
                bottom: 130,
                gap: 18,
              }}
            >
              <View
                style={{
                  alignSelf: "flex-end",
                  alignItems: "center",
                  gap: 20,
                  paddingHorizontal: 13,
                }}
              >
                <View style={{ gap: 6, alignItems: "center" }}>
                  <Pressable>
                    <Image
                      source={img.profile}
                      style={{
                        ...size({ size: 45 }),
                        borderRadius: 100,
                      }}
                    />
                  </Pressable>
                  <Pressable>
                    <BlurView
                      tint="dark"
                      intensity={20}
                      style={{
                        paddingVertical: 6,
                        paddingHorizontal: 12,
                        borderRadius: 12,
                        borderWidth: 1,
                        borderColor: Palette.white,
                        overflow: "hidden",
                      }}
                      experimentalBlurMethod={
                        Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                      }
                    >
                      <Text
                        style={{
                          fontSize: 13,
                          color: Palette.white,
                          fontFamily: FONT_FAMILY.InterMedium,
                        }}
                      >
                        Suivre
                      </Text>
                    </BlurView>
                  </Pressable>
                </View>
                <Pressable>
                  <Image
                    source={icons.heartOutline}
                    style={size({ size: 26 })}
                    resizeMode="contain"
                  />
                </Pressable>
                <Pressable>
                  <Image source={icons.share} style={size({ size: 26 })} />
                </Pressable>
              </View>
              <View style={{ paddingHorizontal: 28 }}>
                <BlurView
                  tint="dark"
                  intensity={20}
                  style={{
                    paddingHorizontal: 14,
                    paddingVertical: 8,
                    borderRadius: 20,
                    backgroundColor: Palette.glass,
                    overflow: "hidden",
                  }}
                  experimentalBlurMethod={
                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                  }
                >
                  <Text
                    style={{
                      fontSize: 12,
                      color: Palette.white,
                      fontFamily: FONT_FAMILY.InterRegular,
                    }}
                  >
                    Description chanson. Viverra enim risus enim enim placerat.
                    Integer pulvinar tristique suscipit risus. Id hendrerit in
                    odio phasellus interdum
                  </Text>
                </BlurView>
              </View>
            </View>
          </View>
        )}
      />
    </View>
  );
};

export default Playbacks;
