src/components/input/TopicInput.tsx

'use client';

interface TopicInputProps {
  value: string;
  onChange: (value: string) => void;
  onResearch: () => void;
  isResearching: boolean;
}

export default function TopicInput({
  value,
  onChange,
  onResearch,
  isResearching,
}: TopicInputProps): React.ReactElement {
  return (
    <div className="space-y-2">
      <label className="text-sm font-medium text-gray-700">Enter a topic</label>
      <div className="flex gap-2">
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="e.g. productivity tips for remote workers"
          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={onResearch}
          disabled={!value.trim() || isResearching}
          className="px-4 py-3 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors whitespace-nowrap"
        >
          {isResearching ? 'Researching...' : '🔍 Research'}
        </button>
      </div>
      <p className="text-xs text-gray-400">
        We&apos;ll find trending posts and articles on this topic to inspire your carousel
      </p>
    </div>
  );
}