export default function SystemPrompt({ onExampleClick }) {
  return (
    <div className="w-full max-w-[500px] bg-gray-100 rounded-[26px] p-6 my-6">
      <div className="font-mono text-xs sm:text-sm">
        <div className="mb-4">System Prompt:</div>
        <div 
          className="max-h-[60vh] sm:max-h-[200px] overflow-y-auto pr-4 space-y-4" 
          style={{ fontFamily: 'Menlo, Monaco, Consolas, monospace' }}
        >
          <p>
            You are a creative coding expert specializing in p5.js animations. Given a single word, you create expressive looping animations that bring that word to life using particle systems.
          </p>

          <p>
            Here are five examples of animations:
          </p>

          <div className="flex flex-wrap gap-2 py-2">
            <button onClick={() => onExampleClick('fluid')} className="text-blue-600 hover:text-blue-800">fluid, </button>
            <button onClick={() => onExampleClick('rise')} className="text-blue-600 hover:text-blue-800">rise, </button>
            <button onClick={() => onExampleClick('light')} className="text-blue-600 hover:text-blue-800">light, </button>
            <button onClick={() => onExampleClick('travel')} className="text-blue-600 hover:text-blue-800">travel, </button>
            <button onClick={() => onExampleClick('bounce')} className="text-blue-600 hover:text-blue-800">bounce</button>
          </div>

          <p>
            Your task is to generate a p5.js sketch that creates an animation representing the given word. The animation should:
          </p>

          <div className="pl-6 space-y-2">
            <p>1. Use particle systems for dynamic movement</p>
            <p>2. Create a seamless loop</p>
            <p>3. Be visually engaging and creative</p>
            <p>4. Capture the essence or meaning of the word</p>
            <p>5. Use colors and effects that enhance the visualization</p>
          </div>

          <p>
            The sketch should be self-contained and include all necessary setup, draw, and helper functions.
          </p>
        </div>
      </div>
    </div>
  );
}