flyer-crawler.projectium.com/src/components/RecipeSuggester.tsx

// src/components/RecipeSuggester.tsx
import React, { useState, useCallback } from 'react';
import { suggestRecipe } from '../services/apiClient';
import { logger } from '../services/logger.client';

export const RecipeSuggester: React.FC = () => {
  const [ingredients, setIngredients] = useState<string>('');
  const [suggestion, setSuggestion] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = useCallback(async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setIsLoading(true);
    setError(null);
    setSuggestion(null);

    const ingredientList = ingredients.split(',').map(item => item.trim()).filter(Boolean);

    if (ingredientList.length === 0) {
      setError('Please enter at least one ingredient.');
      setIsLoading(false);
      return;
    }

    try {
      const response = await suggestRecipe(ingredientList);
      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || 'Failed to get suggestion.');
      }

      setSuggestion(data.suggestion);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
      logger.error({ error: err }, 'Failed to fetch recipe suggestion.');
      setError(errorMessage);
    } finally {
      setIsLoading(false);
    }
  }, [ingredients]);

  return (
    <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Get a Recipe Suggestion</h2>
      <p className="text-gray-600 dark:text-gray-400 mb-4">Enter some ingredients you have, separated by commas.</p>
      <form onSubmit={handleSubmit}>
        <div className="mb-4">
          <label htmlFor="ingredients-input" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Ingredients:</label>
          <input
            id="ingredients-input"
            type="text"
            value={ingredients}
            onChange={(e) => setIngredients(e.target.value)}
            placeholder="e.g., chicken, rice, broccoli"
            disabled={isLoading}
            className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm p-2 border"
          />
        </div>
        <button type="submit" disabled={isLoading} className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 transition-colors">
          {isLoading ? 'Getting suggestion...' : 'Suggest a Recipe'}
        </button>
      </form>

      {error && (
        <div className="mt-4 p-4 bg-red-50 dark:bg-red-900/50 text-red-700 dark:text-red-200 rounded-md text-sm">{error}</div>
      )}

      {suggestion && (
        <div className="mt-6 bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
          <div className="prose dark:prose-invert max-w-none">
            <h5 className="text-lg font-medium text-gray-900 dark:text-white mb-2">Recipe Suggestion</h5>
            <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{suggestion}</p>
          </div>
        </div>
      )}
    </div>
  );
};