'use client';

import type { AppGalleryProps } from '@/types/component-props';
import AppCard from './AppCard';

export default function AppGallery({
  apps,
  isLoading = false,
  onSelectApp,
}: AppGalleryProps) {
  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
        <span className="ml-3 text-gray-600">Loading apps...</span>
      </div>
    );
  }

  if (apps.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500 text-lg">No apps generated yet</p>
        <p className="text-gray-400 text-sm mt-2">
          Record a voice note and say "create an app" to generate your first application
        </p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {apps.map((app) => (
        <AppCard
          key={app.id}
          app={app}
          onClick={onSelectApp}
        />
      ))}
    </div>
  );
}