formularios_front/src/components/banner-uploader.tsx

'use client';

import Image from 'next/image';
import React, { useRef, useState } from 'react';
import Button from './button';

interface BannerUploaderProps {
  label?: string;
  onChange?: (file: File | null) => void;
  defaultBanner?: string;
  className?: string;
  showPreview?: boolean;
}

export default function ImageUploader({
  label = 'Subir imagen',
  onChange,
  defaultBanner,
  className = '',
  showPreview = true,
}: BannerUploaderProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [preview, setPreview] = useState<string | null>(defaultBanner || null);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0] || null;
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreview(reader.result as string);
      };
      reader.readAsDataURL(file);
    } else {
      setPreview(null);
    }
    onChange?.(file);
  };

  const handleRemoveImage = () => {
    setPreview(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
    onChange?.(null);
  };

  return (
    <div className={className}>
      {label && <label className="block mb-2 font-semibold">{label}</label>}
      <div className="d-flex gap-2 align-items-start mb-2">
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          onChange={handleFileChange}
          className="form-control"
        />
        {preview && (
          <Button
            variant="danger"
            onClick={handleRemoveImage}
            className="flex-shrink-0"
          >
            <i className="bi bi-trash"></i>
          </Button>
        )}
      </div>
      {preview && showPreview && (
        <div className="d-flex justify-content-center">
          <Image
            src={preview}
            alt="Previsualización"
            className="img-fluid rounded"
            width={600}
            height={300}
          />
        </div>
      )}
    </div>
  );
}