import { Search } from 'lucide-react';

import type { ClassroomSupportPage } from '@/business/classroom-support/types';
import { StatePanel } from '@/components/ui/state-panel';
import { ClassroomStrategyCard } from '@/components/classroom-support/ClassroomStrategyCard';

interface ClassroomStrategyGridProps {
  readonly page: ClassroomSupportPage;
}

export function ClassroomStrategyGrid({ page }: ClassroomStrategyGridProps) {
  if (page.isLoading) {
    return (
      <StatePanel tone="cyan" alignment="center" loading className="py-12">
        Loading classroom strategies...
      </StatePanel>
    );
  }

  if (page.error) {
    return (
      <StatePanel tone="red" role="alert">
        Strategies could not be loaded from the backend.
      </StatePanel>
    );
  }

  if (page.filteredStrategies.length === 0) {
    return (
      <div className="text-center py-12">
        <Search size={40} className="mx-auto text-slate-600 mb-3" />
        <p className="text-slate-400 font-medium">No strategies found</p>
        <p className="text-sm text-slate-500 mt-1">Try adjusting your filters or search terms</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {page.filteredStrategies.map((strategy) => (
        <ClassroomStrategyCard
          key={strategy.id}
          strategy={strategy}
          isFavorite={page.favoriteStrategyIds.has(strategy.id)}
          onSelect={page.selectStrategy}
          onToggleFavorite={page.toggleFavorite}
        />
      ))}
    </div>
  );
}
