components/ImageOutput.jsx

export default function ImageOutput({ image, loading, usedSeed }) {
  return (
    <div className="space-y-4">
      <div className="bg-white rounded-xl shadow-md p-6">
        <label className="block text-sm font-semibold text-slate-700 mb-4">
          Generated Image
        </label>
        <div className="relative aspect-square bg-slate-100 rounded-lg overflow-hidden">
          {loading ? (
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="text-center">
                <svg className="animate-spin h-12 w-12 text-primary-500 mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <p className="text-slate-600">Generating your image...</p>
              </div>
            </div>
          ) : image ? (
            <img
              src={image}
              alt="Generated"
              className="w-full h-full object-contain"
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center text-slate-400">
              <p>Your generated image will appear here</p>
            </div>
          )}
        </div>
      </div>

      {usedSeed && (
        <div className="bg-white rounded-xl shadow-md p-4">
          <label className="block text-sm font-medium text-slate-700 mb-2">
            🎲 Seed Used
          </label>
          <input
            type="text"
            value={usedSeed}
            readOnly
            className="w-full px-4 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-700"
          />
        </div>
      )}
    </div>
  );
}