import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
import CreateLyricsHeader from './components/CreateLyricsHeader'
import CustomInput from './components/CustomInput'

const SpecificityContext = ({ context, setContext }) => {
  return (
    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
      <CreateLyricsHeader
        title="Spécificité du contexte"
        subTitle="Dis-nous en un peu plus pour qu’on puisse mieux t’aider."
      />
      <View style={styles.exampleCard}>
        <Text style={styles.exampleText}>
          Par ex. : précise des noms, des anecdotes, ton humeur...
        </Text>
      </View>
      <CustomInput
        placeholder="Décris le contexte de ta chanson"
        height={283}
        value={context}
        setValue={setContext}
      />
    </View>
  )
}

export default SpecificityContext

const styles = StyleSheet.create({
  exampleCard: {
    backgroundColor: Palette.white,
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.06)',
  },
  exampleText: {
    fontSize: 14,
    lineHeight: 20,
    color: Palette.black,
    fontFamily: FONT_FAMILY.InterRegular,
  },
})