import { IconX } from "@tabler/icons-solidjs";
import type { UserImage } from "../../network";

type Props = {
    item: UserImage;
    onClose: () => void;
};

export const ItemModal = (props: Props) => {
    return (
        <div class="fixed z-10 inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
            <div class="flex justify-between">
                <h1 class="text-2xl font-bold">{props.item.data.Name}</h1>
                <button type="button" onClick={props.onClose}>
                    <IconX size={24} class="text-neutral-500" />
                </button>
            </div>
            <div class="flex flex-col gap-2 mb-2">
                <p class="text-sm text-neutral-500">
                    {JSON.stringify(props.item.data, null, 2)}
                </p>
            </div>
        </div>
    );
};