"use client"
 
import * as React from "react"
 
import { useDropZone } from "@/hooks/use-dropzone"
 
export function Component() {
  const dropZoneRef = React.useRef<HTMLDivElement>(null)
  const { files, isOverDropZone } = useDropZone(dropZoneRef, {
    onDrop: (files) => {
      console.log("Dropped files:", files)
    },
  })
 
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      <div
        ref={dropZoneRef}
        style={{
          borderRadius: "16px",
          borderWidth: "2px",
          borderStyle: "dashed",
          padding: "32px",
          borderColor: isOverDropZone ? "#2563EB" : "#D1D5DB",
          backgroundColor: isOverDropZone
            ? "rgba(37, 99, 235, 0.1)"
            : "rgba(209, 213, 219, 0.15)",
        }}
      >
        {files ? (
          <p>Dropped {files.length} files</p>
        ) : isOverDropZone ? (
          <p>Drop files here</p>
        ) : (
          <p>Drag files here</p>
        )}
      </div>
      <p>Here is the filenames dropped:</p>
      <ul>{files?.map((file) => <li key={file.name}>{file.name}</li>)}</ul>
    </div>
  )
}