"use client"

import { useQuery } from '@apollo/client'
import { Card } from '@/components/ui/card'
import { FavoritesItems } from './favorites-items'
import { GET_MY_FAVORITES } from '@/graphql/queries'
import { Heart } from 'lucide-react'

interface FavoritesDashboardProps {
  onBackToCategories?: () => void
}

export function FavoritesDashboard({ onBackToCategories }: FavoritesDashboardProps) {
  const { data, loading, error } = useQuery(GET_MY_FAVORITES)
  
  const favorites = data?.myFavorites || []

  if (loading) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-16 w-16 border-4 border-red-400 border-t-transparent mx-auto mb-4"></div>
          <p className="text-white/70">Загружаем избранное...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center">
          <Heart className="h-16 w-16 text-red-400/40 mx-auto mb-4" />
          <p className="text-red-400">Ошибка загрузки избранного</p>
          <p className="text-white/40 text-sm mt-2">{error.message}</p>
        </div>
      </div>
    )
  }

  return (
    <Card className="glass-card h-full overflow-hidden">
      <FavoritesItems favorites={favorites} onBackToCategories={onBackToCategories} />
    </Card>
  )
}