"use client";
import React from "react";
import { UploadFile } from "@/lib/types/models/upload";
import FileUploadDelete from "../file-upload-delete";
import UploadOptions from "../upload-options";
import DragToFileUpload from "../drag-to-file-upload";

interface UploadSectionProps {
  title: string;
  selectedFile: UploadFile;
  setSelectedFiles: (file: UploadFile) => void;
  removeSelectedFile: (index: number) => void;
  selectedIndex: number;
}

export default function Page({
  title,
  selectedFile,
  setSelectedFiles,
  removeSelectedFile,
  selectedIndex,
}: UploadSectionProps) {
  return (
    <div className="border border-gray-200 shadow-sm mb-6 rounded-lg">
      <div className="w-full border-b border-gray-200 mb-2 pb-2 pt-2">
        <h2 className="text-lg font-medium text-gray-900 ml-3">{title}</h2>
      </div>
      <div className="p-3 md:p-6">
        <div className="flex flex-col lg:flex-row gap-4 lg:gap-8">
          <div className="flex-1">
            {!selectedFile?.image ? (
              <DragToFileUpload setSelectedFiles={setSelectedFiles} />
            ) : (
              <FileUploadDelete
                selectedFile={selectedFile}
                selectedIndex={selectedIndex}
                removeSelectedFile={removeSelectedFile}
              />
            )}
          </div>
          {!selectedFile?.image && (
            <UploadOptions setSelectedFiles={setSelectedFiles} />
          )}
        </div>
      </div>
    </div>
  );
}