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

const styles = {
    container: {
        paddingBottom: 8,
    } as CSSProperties,
}

function Poetry() {
    const poetry = usePoetry()

    return (
        <div style={styles.container}>
            <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 dangerouslySetInnerHTML={{ __html: poetry.data.text }} />
                            <p><em>{poetry.data.author}</em></p>
                        </>
                    )
                ) : (
                    <h5>Загрузка...</h5>
                )
            }

        </div>
    )
}

export default Poetry
