components/input-generation.tsx

import { useRef, useState } from "react";
import { HiLightBulb } from "react-icons/hi";

interface Props {
  prompt: string;
  onChange: (value: string) => void;
}

export const InputGeneration: React.FC<Props> = ({ prompt, onChange }) => {
  const input = useRef<HTMLInputElement>(null);

  return (
    <div
      className="bg-white rounded-full p-3 w-full max-w-xl flex items-center justify-between group transition-all duration-200 focus-within:ring-[6px] focus-within:ring-primary border-[2px] border-white focus-within:ring-opacity-40 focus-within:border-primary"
      onClick={() => input.current?.focus()}
    >
      <div className="flex items-center gap-3 pl-3 w-full">
        <HiLightBulb className="text-2xl text-gray-400 group-focus-within:text-primary transition-all duration-200" />
        <input
          ref={input}
          value={prompt}
          type="text"
          className="h-full text-lg placeholder:text-gray-400 text-gray-900 font-medium w-full outline-none"
          placeholder="A thug cat riding his small bike"
          onChange={(e) => onChange(e.target.value)}
        />
      </div>
      <button
        disabled={!prompt}
        className="bg-primary disabled:bg-gray-300 disabled:text-gray-500 uppercase text-white font-semibold rounded-full px-4 py-2 text-base transition-all duration-200"
      >
        Generate
      </button>
    </div>
  );
};