import { TouchableOpacity, View, StyleSheet } from "react-native";
import { useAudio } from "../../hooks/useAudio";
import { FontAwesome } from '@expo/vector-icons';

const audio = require('./../../../assets/audio_prueba.mp3');

interface AudioPlayerProps {
    audioUrl: string;
    title: string;
    description: string;
}

export const AudioPlayer = ({ audioUrl, title, description }: AudioPlayerProps) => {
    const { togglePlay, isPlaying } = useAudio({ source: audio });


    return  <View style={styles.container}>
        <TouchableOpacity onPress={togglePlay}>
            <FontAwesome name={ isPlaying ? 'pause-circle-o' : 'play-circle-o'} size={60} color="black" />
        </TouchableOpacity>
    </View>;
}

const styles = StyleSheet.create({
    container: {
        height: 100,
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.1)'
    }
});