import { View, Text, Pressable, Image, Platform } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { BlurView } from "expo-blur";
import { icons } from "../../../assets";
import Style, { size } from "../../../styles/Style";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import { navigate } from "../../../navigation/NavigationService";
import { Routes } from "../../../navigation";

const MyPlaylist = () => {
  return (
    <CardContainer
      label="Mes Playlists"
      onPress={() => navigate(Routes.AllMyPlaylist)}
    >
      <View style={{ gap: 8 }}>
        {["Musiques de lover", "Musiques triste"].map((item, index) => (
          <View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
            <BlurView
              intensity={20}
              style={{
                ...Style.containerSpaceBetween,
                height: 59,
                paddingHorizontal: 10,
              }}
              experimentalBlurMethod={
                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
              }
            >
              <Text
                style={{
                  fontSize: 16,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterRegular,
                }}
              >
                {item}
              </Text>
              <Pressable>
                <Image
                  source={icons.chevronDown}
                  style={{
                    ...size({ size: 15 }),
                    transform: [{ rotate: "-90deg" }],
                  }}
                  resizeMode="contain"
                />
              </Pressable>
            </BlurView>
          </View>
        ))}
      </View>
    </CardContainer>
  );
};

export default MyPlaylist;