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

const Rhymes = ({ selected: selectedProp, setSelected: setSelectedProp }) => {
  const [internalSelected, setInternalSelected] = useState(null);
  const selected = selectedProp ?? internalSelected;
  const setSelected = setSelectedProp ?? setInternalSelected;

  // Selection handled by ListSelection

  return (
    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
      <CreateLyricsHeader title="Avec ou sans rimes" />
      <ItemContainer height={200}>
        <ListSelection
          options={["Avec rimes", "Sans rimes", "Mélange des deux"]}
          variant="simple"
          selected={selected}
          setSelected={setSelected}
          contentContainerStyle={{ gap: 10 }}
          itemContainerStyle={styles.itemContainer}
          itemTextStyle={styles.dropzone}
        />
      </ItemContainer>
    </View>
  );
};

export default Rhymes;

const styles = StyleSheet.create({
  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,
  },
  dropzone: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
    textAlign: "center",
  },
});