import React, { useRef } from 'react';

/**
 * Component for static site deployment options
 * @param {Object} props - Component props
 * @param {string} props.fileName - Selected file name
 * @param {Function} props.onFileChange - Handler for file change
 * @returns {JSX.Element} - Rendered component
 */
const StaticDeployment = ({ fileName, onFileChange }) => {
  const fileInputRef = useRef(null);

  return (
    <div className="space-y-4">
      <div className="p-4 bg-neutral-700/50 rounded-md text-neutral-300 text-center">
        Upload the zip file containing your static website
      </div>

      <div className="pt-2">
        <label htmlFor="file-upload" className="block text-white font-medium mb-2">Upload File (ZIP/TAR)</label>
        <div className="flex items-center justify-center w-full">
          <label
            htmlFor="file-upload"
            className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer border-neutral-600 hover:border-[#6d9e37]"
          >
            <div className="flex flex-col items-center justify-center pt-5 pb-6">
              <span className="text-3xl mb-3 text-neutral-400">📁</span>
              <p className="mb-2 text-sm text-neutral-400">
                <span className="font-semibold">Click to upload</span> or drag and drop
              </p>
              <p className="text-xs text-neutral-500">ZIP or TAR files only (max. 100MB)</p>
            </div>
            <input
              id="file-upload"
              ref={fileInputRef}
              type="file"
              onChange={onFileChange}
              className="hidden"
              accept=".zip,.tar"
            />
          </label>
        </div>
        {fileName && (
          <div className="mt-2 text-sm text-neutral-400">
            Selected file: {fileName}
          </div>
        )}
      </div>
    </div>
  );
};

export default StaticDeployment;