import Alert from '@mui/material/Alert'
import Box from '@mui/material/Box'
import Paper from '@mui/material/Paper'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { useQuery } from '@tanstack/react-query'
import { fetchPublicInfoBlocks } from '@/entities/info'

export function InfoPage() {
  const q = useQuery({
    queryKey: ['info-page', 'public', 'blocks'],
    queryFn: fetchPublicInfoBlocks,
  })

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Информация для покупателей
      </Typography>
      <Typography color="text.secondary" sx={{ mb: 2 }}>
        Как оформить заказ, как проходит доставка, оплата и другие важные детали.
      </Typography>

      {q.isLoading && <Typography color="text.secondary">Загрузка…</Typography>}
      {q.isError && <Alert severity="error">Не удалось загрузить информацию.</Alert>}
      {q.isSuccess && q.data.items.length === 0 && <Alert severity="info">Раздел пока не заполнен.</Alert>}

      {q.isSuccess && q.data.items.length > 0 && (
        <Stack spacing={2}>
          {q.data.items.map((block) => (
            <Paper key={block.id} variant="outlined" sx={{ p: 2, borderRadius: 2 }}>
              <Typography variant="h6" sx={{ mb: 0.75 }}>
                {block.title}
              </Typography>
              <Typography sx={{ whiteSpace: 'pre-wrap' }}>{block.body}</Typography>
            </Paper>
          ))}
        </Stack>
      )}
    </Box>
  )
}
