import { FormItem, FormControl, FormLabel } from "@/components/ui/form"
import { Checkbox } from "@/components/ui/checkbox"
export default function GenreCheckbox({ field, item }) {
	return (
		<FormItem
			key={item.id}
			className="flex flex-row items-start space-x-3 space-y-0"
		>
			<FormControl>
				<Checkbox
					checked={field.value?.includes(item.id)}
					onCheckedChange={(checked) => {
						return checked
							? field.onChange([...field.value, item.id])
							: field.onChange(
								field.value?.filter(
									(value) => value !== item.id
								)
							)
					}}
				/>
			</FormControl>
			<FormLabel className="text-sm font-normal">
				{item.name}
			</FormLabel>
		</FormItem>


	)
}