import { AlertCircle } from 'lucide-react'
import { memo } from 'react'

import { Alert, AlertDescription } from '@/components/ui/alert'

import type { ErrorDisplayBlockProps } from '../types'

/**
 * Блок отображения ошибок GraphQL запросов
 */
export const ErrorDisplayBlock = memo<ErrorDisplayBlockProps>(function ErrorDisplayBlock({
  error,
}) {
  if (!error) return null

  return (
    <Alert variant="destructive" className="mb-4">
      <AlertCircle className="h-4 w-4" />
      <AlertDescription>
        <div className="space-y-2">
          <div>Ошибка загрузки данных: {error.message}</div>
          {error.graphQLErrors && error.graphQLErrors.length > 0 && (
            <div className="text-sm">
              <div className="font-semibold">Детали:</div>
              <ul className="list-disc list-inside space-y-1">
                {error.graphQLErrors.map((gqlError, index) => (
                  <li key={index}>{gqlError.message}</li>
                ))}
              </ul>
            </div>
          )}
        </div>
      </AlertDescription>
    </Alert>
  )
})

ErrorDisplayBlock.displayName = 'ErrorDisplayBlock'