import { cn } from './cn';

export type ImageGridItem = {
  id: string;
  src: string;
  alt?: string;
  badge?: string;
};

export interface ImageGridProps {
  items: ImageGridItem[];
  columns?: number;
  onClick?: (item: ImageGridItem) => void;
  className?: string;
}

export function ImageGrid({ items, columns = 3, onClick, className }: ImageGridProps) {
  const cols =
    columns === 2 ? 'ask-grid-cols-2' :
    columns === 4 ? 'ask-grid-cols-4' :
    columns === 5 ? 'ask-grid-cols-5' :
    'ask-grid-cols-3';

  return (
    <div className={cn('ask-grid ask-gap-2', cols, className)}>
      {items.map((it) => (
        <button
          key={it.id}
          type="button"
          className="ask-relative ask-overflow-hidden ask-rounded-[14px] ask-border ask-border-borderSubtle ask-bg-surfaceAlt hover:ask-ring-2 hover:ask-ring-primary/40"
          onClick={() => onClick?.(it)}
          title={it.alt ?? ''}
        >
          <img
            src={it.src}
            alt={it.alt ?? ''}
            className="ask-block ask-h-24 ask-w-full ask-object-cover"
            loading="lazy"
            decoding="async"
            draggable={false}
          />
          {it.badge ? (
            <span className="ask-absolute ask-right-2 ask-top-2 ask-rounded-full ask-bg-surfaceAlt/90 ask-px-2 ask-py-1 ask-text-[10px] ask-text-textMuted">
              {it.badge}
            </span>
          ) : null}
        </button>
      ))}
    </div>
  );
}
