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

import { Card } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'

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

/**
 * Блок пустого состояния и загрузки
 */
export const EmptyStateBlock = memo<EmptyStateBlockProps>(function EmptyStateBlock({
  isLoading,
  hasData,
}) {
  if (isLoading) {
    return (
      <div className="space-y-4">
        {Array.from({ length: 3 }).map((_, index) => (
          <Card key={index} className="p-4">
            <div className="space-y-3">
              <Skeleton className="h-4 w-32" />
              <Skeleton className="h-8 w-full" />
              <div className="flex gap-2">
                <Skeleton className="h-6 w-16" />
                <Skeleton className="h-6 w-20" />
                <Skeleton className="h-6 w-24" />
              </div>
            </div>
          </Card>
        ))}
      </div>
    )
  }

  if (!hasData) {
    return (
      <Card className="p-8 text-center">
        <div className="flex flex-col items-center space-y-4">
          <BarChart3 className="h-12 w-12 text-muted-foreground" />
          <div className="space-y-2">
            <h3 className="text-lg font-semibold">Нет данных</h3>
            <p className="text-muted-foreground max-w-sm">
              Данные по рекламным кампаниям отсутствуют для выбранного периода.
              Попробуйте изменить период или выбрать другие кампании.
            </p>
          </div>
        </div>
      </Card>
    )
  }

  return null
})

EmptyStateBlock.displayName = 'EmptyStateBlock'