import { View, StyleSheet } from "react-native";
import React from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { RHYTHM } from "../../data/data";
import ListSelection from "../../components/ListSelection/ListSelection";

const ChooseRhythm = ({ selected, setSelected }) => {

  return (
    <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
      <CreateLyricsHeader title="Choisis un rythme" />
      <View style={{ flex: 1 }}>
        <ItemContainer height={340}>
          <ListSelection
            options={RHYTHM}
            variant="simple"
            selected={selected}
            setSelected={setSelected}
            contentContainerStyle={styles.contentContainer}
            itemContainerStyle={styles.itemContainer}
            itemTextStyle={styles.itemText}
          />
        </ItemContainer>
      </View>
    </View>
  );
};

export default ChooseRhythm;

const styles = StyleSheet.create({
  contentContainer: {
    flexGrow: 1,
    padding: 8,
    gap: 10,
    backgroundColor: "#FFFFFF00",
  },
  itemContainer: {
    height: 54,
    backgroundColor: Palette.glass,
    borderRadius: 14,
    overflow: "hidden",
    shadowColor: "#00000040",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,

    elevation: 5,
  },
  itemText: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
});
