"use client";
import React, { PropsWithChildren } from "react";
import { CheckedState } from "@radix-ui/react-checkbox";
import { Checkbox } from "@/components/ui/checkbox";
import { useResourcePickerContext } from "@/components/ui/resource-picker/resource-picker-context";
import { cn } from "@/lib/utils/cn";

export type ResourcePickerItemProps = PropsWithChildren<{
    id: string;
    className?: string;
}>;

export const ResourcePickerItem: React.FC<ResourcePickerItemProps> = (props) => {
    const {
        id,
        className,
        children
    } = props;

    const {
        selected,
        select
    } = useResourcePickerContext();

    return (
        <label
          className={cn("relative flex flex-col justify-center items-center gap-2 border rounded-md cursor-pointer hover:bg-muted transition-colors aspect-square", className)}>
            <Checkbox
              id={`pick-resource-${id}`}
              className="absolute top-2 left-2 z-1"
              checked={selected.includes(id)}
              onCheckedChange={(checked: CheckedState) => select(id, checked)} />

            {children}
        </label>
    );
};