import { usePoetry } from '../hooks/api'
import { gotError, gotResponse } from '../hooks/useFetch'

import styles from '../styles/Poetry.module.css'

function Poetry() {
    const poetry = usePoetry()

    return (
        <section>
            <h4 className='fw-bold'>Поэзия</h4> {
                gotResponse(poetry) ? (
                    gotError(poetry) ? (
                        <div className='text-danger'>
                            <h5>Ошибка получения стиха</h5>
                            <p>{poetry.error}</p>
                        </div>
                    ) : (
                        <>
                            <h5>{poetry.data.title}</h5>
                            <p
                                className={styles.text}
                                dangerouslySetInnerHTML={{
                                    __html:
                                        poetry.data.text.trim().replace(/(\n){3,}/g, '\n\n'),
                                }}
                            />
                            <p><em>{poetry.data.author}</em></p>
                            <img src={`/poem_pic/${poetry.data.id}.jpg`} alt='Иллюстрация' />
                        </>
                    )
                ) : (
                    <h5>Загрузка...</h5>
                )
            }

        </section>
    )
}

export default Poetry