import * as React from "react"
 
import { useCsvImport } from "@/hooks/use-csv-import"
 
interface UserRow {
  name: string
  email: string
  age: string
}
 
export function Component() {
  const [file, setFile] = React.useState<File | null>(null)
  const { headers, rows, errors, loading } = useCsvImport<UserRow>(file, {
    delimiter: ",",
    skipEmptyLines: true,
  })
 
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFile(e.target.files?.[0] || null)
  }
 
  return (
    <div
      ref={dropRef}
      onClick={() => inputRef.current?.click()}
      role="button"
      tabIndex={0}
      style={{
        border: isOverDropZone ? "2px dashed #6b46c1" : "2px dashed #ccc",
        padding: 16,
        borderRadius: 12,
      }}
    >
      <input
        ref={inputRef}
        type="file"
        accept=".csv"
        onChange={handleFileChange}
        style={{ display: "none" }}
      />
      <p>
        {isOverDropZone
          ? "Drop CSV here"
          : "Drag & drop CSV or click to browse"}
      </p>
      {loading && <p>Parsing...</p>}
      {errors.size > 0 && (
        <div>
          {Array.from(errors.entries()).map(([line, error]) => (
            <p key={line}>
              Line {line}: {error}
            </p>
          ))}
        </div>
      )}
      <div>
        <p>Headers: {headers.join(", ")}</p>
      </div>
      <ul>
        {rows.map((row, i) => (
          <li key={i}>
            {row.name} - {row.email}
          </li>
        ))}
      </ul>
    </div>
  )
}