import { HTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/utils';

interface DropZoneProps extends HTMLAttributes<HTMLDivElement> {
  isOver?: boolean;
  children: React.ReactNode;
}

const DropZone = forwardRef<HTMLDivElement, DropZoneProps>(
  ({ className, isOver = false, children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "transition-all duration-200",
          isOver 
            ? "ring-2 ring-[var(--primary)]/50 bg-[var(--card-hover)]" 
            : "",
          className
        )}
        {...props}
      >
        {children}
      </div>
    );
  }
);

DropZone.displayName = 'DropZone';

export { DropZone };