'use client';
import React from 'react';
import {composeRenderProps} from 'react-aria-components/composeRenderProps';
import {type DropZoneProps, DropZone as RACDropZone, Text} from 'react-aria-components/DropZone';
import {tv} from 'tailwind-variants';

const dropZone = tv({
  base: 'flex items-center justify-center p-8 min-h-24 w-[30%] font-sans text-base text-balance text-center rounded-lg border border-1 border-neutral-300 dark:border-neutral-800 bg-white dark:bg-neutral-900',
  variants: {
    isFocusVisible: {
      true: 'outline outline-2 -outline-offset-1 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight]'
    },
    isDropTarget: {
      true: 'bg-blue-200 dark:bg-blue-800 outline outline-2 -outline-offset-1 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight]'
    }
  }
});

export function DropZone(props: DropZoneProps) {
  return (
    <RACDropZone
      {...props}
      className={composeRenderProps(props.className, (className, renderProps) =>
        dropZone({...renderProps, className})
      )}
    />
  );
}

export {Text};
