"use client"

import * as React from "react"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetFooter,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { PossibleItem } from "@/config/vendorInvestigationsColumnsConfig"

interface ItemsDrawerProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  investigationId: number | null
  items: PossibleItem[]
}

export function ItemsDrawer({
  open,
  onOpenChange,
  investigationId,
  items,
}: ItemsDrawerProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="sm:max-w-md">
        <SheetHeader>
          <SheetTitle>Possible Items</SheetTitle>
          <SheetDescription>
            {items.length > 0
              ? `Showing ${items.length} items for investigation #${investigationId}`
              : `No items found for investigation #${investigationId}`}
          </SheetDescription>
        </SheetHeader>
        <ScrollArea className="max-h-[70vh] mt-6 pr-4">
          {items.length > 0 ? (
            <div className="space-y-4">
              {items.map((item, index) => (
                <div
                  key={index}
                  className="flex flex-col gap-2 p-3 rounded-lg border"
                >
                  <div className="flex justify-between items-start">
                    <h4 className="font-medium">{item.itemName || "Unknown Item"}</h4>
                    {item.itemName && (
                      <span className="text-xs bg-muted px-2 py-1 rounded">
                     {item.itemCode}
                      </span>
                    )}
                  </div>


                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-6 text-muted-foreground">
              No items available
            </div>
          )}
        </ScrollArea>
        <SheetFooter className="mt-4">
          <Button onClick={() => onOpenChange(false)}>Close</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}