import { useState, useEffect } from 'react';
import { Card } from '../components/ui/Card';
import { ListingCard } from '../components/listings/ListingCard';
import { api } from '../api/client';
import type { Listing, PaginatedResponse } from '../types';

export function SavedItemsPage() {
  const [listings, setListings] = useState<Listing[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.get<PaginatedResponse<Listing>>('/listings/favorites')
      .then(res => setListings(res.data))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <div className="text-center py-12 text-gray-500">Loading...</div>;

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Saved Items</h1>

      {listings.length === 0 ? (
        <Card>
          <div className="text-center py-8">
            <p className="text-gray-500">No saved items yet. Browse listings and tap the heart to save items you like.</p>
          </div>
        </Card>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {listings.map(listing => (
            <ListingCard key={listing.id} listing={listing} />
          ))}
        </div>
      )}
    </div>
  );
}