import { BlurView } from 'expo-blur'
import React from 'react'
import { Platform, StyleSheet, Text, View } from 'react-native'
import KaraokeLyrics from '../../../components/KaraokeLyrics'
import { Palette } from '../../../styles'
import { FONT_FAMILY } from '../../../styles/Fonts'

const PlaybackLyricsCard = ({ alignedWords, currentTimeS, fallbackTitle }) => {
  return (
    <View style={styles.container}>
      <BlurView tint="dark" intensity={Platform.OS !== 'ios' ? 10 : 20} style={styles.blur}>
        {alignedWords?.length > 0 ? (
          <KaraokeLyrics alignedWords={alignedWords} currentTimeS={currentTimeS} />
        ) : (
          <Text style={styles.title}>{fallbackTitle || 'Description chanson'}</Text>
        )}
      </BlurView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 28,
  },
  blur: {
    paddingHorizontal: 14,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: Palette.glass,
    overflow: 'hidden',
  },
  title: {
    fontSize: 12,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
})

export default PlaybackLyricsCard