File Upload

User cần upload file?
├─ Ảnh (JPG/PNG/WebP) → Image Upload
│   ├─ 1 ảnh → mode="single"
│   └─ Nhiều ảnh → mode="multiple"
├─ File bất kỳ → <input type="file">
└─ Camera trực tiếp → Camera API

interface ImageUploadProps {
  /** Single or multiple files */
  mode?: 'single' | 'multiple'; // default: 'single'
  /** Accepted file types */
  accept?: string; // default: 'image/jpeg,image/png,image/webp'
  /** Max file size in bytes */
  maxSize?: number; // default: 5 * 1024 * 1024 (5MB)
  /** Max files (for multiple mode) */
  maxFiles?: number; // default: 5
  /** Current value(s) */
  value?: File | File[] | string | string[];
  /** Change handler */
  onChange?: (files: File[]) => void;
  /** Error message */
  errorMessage?: string;
  /** Disabled state */
  disabled?: boolean;
  /** Helper text */
  helperText?: string; // default: "Max 5MB, JPG/PNG/WebP"
  /** Upload label */
  label?: string; // default: "Chọn ảnh hoặc kéo thả vào đây"
}

/* ─── Container ─── */
.file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  min-height: 160px;
  padding: var(--spacing-8);
  border: 2px dashed var(--border);
  border-radius: var(--section-radius-default);
  background: var(--muted);
  cursor: pointer;
  transition: border-color var(--duration-fast-2) var(--easing-standard),
              background var(--duration-fast-2) var(--easing-standard);
  position: relative;
  text-align: center;
}

.file-upload:hover {
  border-color: var(--primary);
}

.file-upload:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Drag-over */
.file-upload--dragover {
  border-color: var(--primary);
  background: var(--primary-muted);
}

/* Error */
.file-upload--error {
  border-color: var(--destructive);
}

/* Disabled */
.file-upload--disabled {
  opacity: var(--disabled);
  pointer-events: none;
}

/* ─── Icon ─── */
.file-upload__icon {
  width: 48px;
  height: 48px;
  color: var(--muted-foreground);
}

/* ─── CTA Text ─── */
.file-upload__cta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--primary);
}

/* ─── Helper Text ─── */
.file-upload__helper {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
}

/* ─── Preview ─── */
.file-upload--filled {
  padding: var(--spacing-4);
}

.file-upload__preview {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: var(--comp-radius);
  overflow: hidden;
}

.file-upload__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Remove button ─── */
/* Semantic: removing an image is REVERSIBLE → neutral overlay, NOT destructive */
.file-upload__remove {
  position: absolute;
  top: var(--spacing-1);
  right: var(--spacing-1);
  width: var(--spacing-7);
  height: var(--spacing-7);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast-2) var(--easing-standard);
}

.file-upload__remove:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* ─── Error message ─── */
.file-upload__error {
  font-size: var(--font-size-xs);
  color: var(--destructive);
  margin-top: var(--spacing-2);
}

/* Hidden file input */
.file-upload__input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .file-upload { transition: none; }
}

{/* Basic single image upload */}
<ImageUpload
  label="Ảnh sản phẩm"
  helperText="Tối đa 5MB, JPG/PNG"
  onChange={(files) => setProductImage(files[0])}
/>

{/* With validation error */}
<ImageUpload
  errorMessage="File quá lớn. Vui lòng chọn ảnh dưới 5MB."
/>

{/* Multiple images */}
<ImageUpload
  mode="multiple"
  maxFiles={4}
  onChange={(files) => setGallery(files)}
/>