import type { StampWithStatus } from "@stamp/shared";
import StampCard from "./StampCard";

type StampGridProps = {
  stamps: StampWithStatus[];
  onStampClick?: (stamp: StampWithStatus) => void;
};

export default function StampGrid({ stamps, onStampClick }: StampGridProps) {
  return (
    <div className="grid grid-cols-4 gap-3 stagger-children">
      {stamps.map((stamp) => (
        <StampCard
          key={stamp.id}
          name={stamp.name}
          imageColor={stamp.imageColor}
          imageGrey={stamp.imageGrey}
          collected={stamp.collected}
          onClick={() => onStampClick?.(stamp)}
        />
      ))}
    </div>
  );
}
