import React, { useRef } from "react";
import { FileButton, Button } from "@mantine/core";
import { useTranslation } from "react-i18next";

interface FileUploadButtonProps {
  file?: File;
  onChange: (file: File | null) => void;
  accept?: string;
  disabled?: boolean;
  placeholder?: string;
  variant?: "outline" | "filled" | "light" | "default" | "subtle" | "gradient";
  fullWidth?: boolean;
}

const FileUploadButton = ({ 
  file, 
  onChange, 
  accept = "*/*",
  disabled = false,
  placeholder,
  variant = "outline",
  fullWidth = true
}: FileUploadButtonProps) => {
  const { t } = useTranslation();
  const resetRef = useRef<() => void>(null);

  const defaultPlaceholder = t('common.chooseFile', 'Choose File');

  return (
    <FileButton
      resetRef={resetRef}
      onChange={onChange}
      accept={accept}
      disabled={disabled}
    >
      {(props) => (
        <Button {...props} variant={variant} fullWidth={fullWidth}>
          {file ? file.name : (placeholder || defaultPlaceholder)}
        </Button>
      )}
    </FileButton>
  );
};

export default FileUploadButton;