components/Spinner.tsx

import React from 'react';
import { BonsaiIcon } from './icons';

interface SpinnerProps {
    text?: string;
}

const Spinner: React.FC<SpinnerProps> = ({ text = "Yuki the Bonsai Sensei is analyzing your tree..." }) => {
  return (
    <div className="flex flex-col items-center justify-center gap-4 text-center p-8">
      <BonsaiIcon className="h-12 w-12 text-green-700 animate-pulse" />
      <p className="text-lg font-medium text-stone-600">{text}</p>
      <div className="w-48 h-2 bg-stone-200 rounded-full overflow-hidden">
          <div className="h-full bg-green-600 rounded-full animate-[progress_2s_ease-in-out_infinite]"></div>
      </div>
      <style>{`
        @keyframes progress {
            0% { width: 0%; }
            50% { width: 100%; }
            100% { width: 0%; }
        }
      `}</style>
    </div>
  );
};

export default Spinner;