components/GenerationForm.js

import Image from 'next/image';
import ExampleChip from './ExampleChip';
import SystemPrompt from './SystemPrompt';
import { examples } from '../sketches';

export default function GenerationForm({
  word,
  setWord,
  instructions,
  setInstructions,
  isGenerating,
  showSystemPrompt,
  setShowSystemPrompt,
  showExamples,
  setShowExamples,
  activeExample,
  handleExampleClick,
  onSubmit
}) {
  return (
    <div className="w-full max-w-[500px]">
      <button
        onClick={() => setShowExamples(!showExamples)}
        className="flex items-center mt-4 gap-2 text-sm text-black hover:text-black"
      >
        <svg
          className={`w-4 h-4 transition-transform ${showExamples ? 'rotate-180' : ''}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
        See examples we used to teach the model
      </button>
      
      {showExamples && (
        <div className="flex gap-2 flex-wrap mt-4">
          {Object.keys(examples).map((example) => (
            <ExampleChip
              key={example}
              label={example}
              onClick={() => handleExampleClick(example)}
              active={activeExample === example}
            />
          ))}
        </div>
      )}

      {showSystemPrompt && (
        <SystemPrompt onExampleClick={handleExampleClick} />
      )}

      <form onSubmit={onSubmit} className="w-full max-w-[500px] flex flex-col gap-4 items-center mt-4">
        <div className="relative w-full">
          <input
            type="text"
            value={word}
            onChange={(e) => setWord(e.target.value)}
            maxLength={20}
            placeholder='Type a word like "float" ...'
            className="w-full p-3 sm:p-4 bg-transparent border-[1.5px] border-gray-200 rounded-[26px] text-black placeholder-gray-400 focus:outline-none focus:border-black text-xs sm:text-base"
          />
          <button 
            type="button"
            className={`group absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black transition-colors p-1.5 rounded-full ${showSystemPrompt ? 'bg-gray-200' : 'hover:bg-gray-100'} active:bg-gray-200`}
            onClick={() => setShowSystemPrompt(!showSystemPrompt)}
          >
            <Image
              src="/info_spark.png"
              alt="show system prompt"
              width={20}
              height={20}
              className="opacity-100"
              priority={false}
            />
            <div className="absolute bottom-full mb-1 right-0 scale-0 transition-all rounded bg-gray-100 p-2 text-xs text-black group-hover:scale-100 whitespace-nowrap">
              {showSystemPrompt ? 'Hide' : 'Show'} system prompt
            </div>
          </button>
        </div>
        
        <textarea
          value={instructions}
          onChange={(e) => setInstructions(e.target.value)}
          placeholder="Optional: add additional instructions for your animation."
          rows={1}
          className="w-full p-3 sm:p-4 bg-transparent border-[1.5px] border-gray-200 resize-none rounded-[26px] text-black placeholder-gray-400 focus:outline-none focus:border-black text-xs sm:text-base"
          style={{
            height: 'auto',
          }}
          onInput={(e) => {
            e.target.style.height = 'auto';
            e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px';
          }}
        />
        
        <button
          type="submit"
          disabled={isGenerating || !word.trim()}
          className={`w-44 py-3 rounded-[32px] font-medium transition-colors ${
            isGenerating
              ? 'bg-[#EEEEEE] text-black'
              : !word.trim()
                ? 'bg-gray-100 text-gray-400'
                : 'bg-black text-white hover:bg-gray-900'
          }`}
        >
          {isGenerating ? 'Generating...' : 'Generate'}
        </button>
      </form>
    </div>
  );
}