import { FC } from 'react'
import { ServiceDetailDataType } from '../types/ServiecTypes'

type Props = {
    item: ServiceDetailDataType
}

const ServiceAudios: FC<Props> = ({ item }) => {
    if (!item?.audios || item.audios.length === 0) {
        return null
    }

    return (
        <div className='mb-6'>

            <div className='space-y-3'>
                {item.audios.map((audio) => (
                    <div key={audio.id} className='bg-white  rounded-2xl p-4'>
                        <div className='flex items-center justify-between mb-3'>
                            <span className='text-sm text-gray-700'>فایل صوتی</span>
                        </div>

                        <audio
                            src={audio.audioUrl}
                            controls
                            className='w-full'
                        />
                    </div>
                ))}
            </div>
        </div>
    )
}

export default ServiceAudios
