"use client";

import { MediaItem } from "./media-types";
import clsx from "clsx";

type Props = {
    items: MediaItem[];
    selectedIds: string[];
    onSelect: (item: MediaItem) => void;
    multiple?: boolean;
};

export function MediaGrid({ items, selectedIds, onSelect, multiple }: Props) {
    return (
        <div className="grid grid-cols-3 gap-3 md:grid-cols-5">
            {items.map((m) => {
                const selected = selectedIds.includes(m.id);
                return (
                    <button
                        key={m.id}
                        type="button"
                        onClick={() => onSelect(m)}
                        className={clsx(
                            "relative aspect-square overflow-hidden rounded border",
                            selected && "ring-2 ring-primary"
                        )}
                    >
                        <img
                            src={m.url}
                            alt={m.alt ?? ""}
                            className="h-full w-full object-cover"
                        />
                    </button>
                );
            })}
        </div>
    );
}