"use client"

import { DriveCardRefProvider } from "@/components/drive/drive-card-ref-context"
import { useDriveMarqueeSelection } from "@/lib/hooks/use-drive-marquee-selection"
import { cn } from "@/lib/utils"

export function DriveMarqueeSurface({
  enabled = true,
  className,
  children,
}: {
  enabled?: boolean
  className?: string
  children: React.ReactNode
}) {
  const { registerCardRef, onSurfacePointerDown, marquee } =
    useDriveMarqueeSelection(enabled)

  return (
    <DriveCardRefProvider registerCardRef={registerCardRef}>
      <div
        data-drive-marquee-surface
        className={cn("relative flex min-h-full flex-1 flex-col select-none", className)}
        onPointerDown={onSurfacePointerDown}
      >
        {children}
        {marquee ? (
          <div
            className="pointer-events-none fixed z-50 border border-[#1a73e8] bg-[#1a73e8]/10"
            style={{
              left: marquee.left,
              top: marquee.top,
              width: marquee.width,
              height: marquee.height,
            }}
          />
        ) : null}
      </div>
    </DriveCardRefProvider>
  )
}