import { HandMetal } from 'lucide-react';

import { SignLanguageCard } from '@/components/sign-language/SignLanguageCard';
import { StatePanel } from '@/components/ui/state-panel';
import type { SignItem } from '@/shared/types/app';

interface SignLanguageGridProps {
  readonly signs: readonly SignItem[];
  readonly learnedSignIds: ReadonlySet<string>;
  readonly onSelectSign: (id: string) => void;
}

export function SignLanguageGrid({
  signs,
  learnedSignIds,
  onSelectSign,
}: SignLanguageGridProps) {
  if (signs.length === 0) {
    return (
      <StatePanel
        title="No signs found"
        icon={HandMetal}
        tone="slate"
        alignment="center"
      >
        Adjust the search or category filter.
      </StatePanel>
    );
  }

  return (
    <section className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {signs.map((sign) => (
        <SignLanguageCard
          key={sign.id}
          sign={sign}
          isLearned={learnedSignIds.has(sign.id)}
          onSelect={onSelectSign}
        />
      ))}
    </section>
  );
}
