"use client";

import {
  type ExternalPreviewItem,
  UnifiedFileUploader,
} from "@/components/shared/unified-file-uploader";

export interface FileUploadDropzoneProps {
  onFilesSelected: (files: File[]) => void;
  acceptedTypes?: string[];
  maxSize?: number;
  useGlobalSettings?: boolean;
  translations: {
    dragText: string;
    browseText: string;
    maxSizeText: string;
    selectedFilesText?: string;
  };
  className?: string;
  value?: File[];
  externalPreviewItems?: ExternalPreviewItem[];
  showPreview?: boolean;
  multiple?: boolean;
  disabled?: boolean;
  /** Preview style: 'grid' for image thumbnails, 'list' for file names with size */
  previewVariant?: "grid" | "list";
  /** Dropzone style variant */
  variant?: "default" | "primary";
}

export function FileUploadDropzone({
  onFilesSelected,
  acceptedTypes,
  maxSize: maxSizeProp,
  useGlobalSettings = true,
  translations,
  className,
  value,
  externalPreviewItems,
  showPreview = true,
  multiple = true,
  disabled = false,
  previewVariant = "grid",
  variant = "default",
}: FileUploadDropzoneProps) {
  return (
    <UnifiedFileUploader
      mode="dropzone"
      tone={variant}
      value={value}
      externalPreviewItems={externalPreviewItems}
      onChange={onFilesSelected}
      multiple={multiple}
      accept={acceptedTypes?.join(",")}
      maxSizeMb={maxSizeProp}
      useGlobalSettings={useGlobalSettings}
      disabled={disabled}
      previewVariant={showPreview ? previewVariant : "none"}
      className={className}
      labels={{
        dragText: translations.dragText,
        browseText: translations.browseText,
        maxSizeText: translations.maxSizeText,
        selectedFilesText: translations.selectedFilesText,
      }}
    />
  );
}