import { View, Text, Image, Pressable } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background, icons } from "../../assets";
import { gutters, Palette, Style } from "../../styles";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../styles/Fonts";
import { size } from "../../styles/Style";

const AllMyPlaylist = () => {
  return (
    <Page
      headerType="NAVIGATION"
      backgroundImg={background.libraryBG}
      title="Mes Playlists"
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
    >
      <View style={{ flex: 1 }}>
        <View style={{ gap: 8 }}>
          {[
            "Musiques de lover",
            "Musiques triste",
            "Happy new year",
            "Happy songs",
          ].map((item, index) => (
            <View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
              <BlurView
                intensity={20}
                style={{
                  ...Style.containerSpaceBetween,
                  height: 59,
                  paddingHorizontal: 10,
                }}
              >
                <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>
      </View>
    </Page>
  );
};

export default AllMyPlaylist;
