import { View, Text, FlatList } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { EMOTION_CONVEY } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";

const EmotionConvey = () => {
  return (
    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
      <CreateLyricsHeader
        title={`Quel émotion veux-tu\ntransmettre ?`}
        subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
      />

      <ItemContainer height={responsiveHeight(50)}>
        <FlatList
          data={EMOTION_CONVEY}
          contentContainerStyle={{
            gap: 16,
            flexGrow: 1,
            zIndex: 2,
            paddingTop: 5,
          }}
          renderItem={({ item, index }) => (
            <View style={{ paddingHorizontal: 5 }}>
              <CreateLyricsHeader colors={item.color} intensity={30} >
                <Text
                  style={{
                    fontSize: 16,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
                    {item.title}
                  </Text>{" "}
                  : {item.description}
                </Text>
              </CreateLyricsHeader>
            </View>
          )}
        />
      </ItemContainer>
    </View>
  );
};

export default EmotionConvey;