src/components/ReviewInput.js

import React from 'react';
import { Box, TextField, Button, Typography, CircularProgress } from '@mui/material';
import RateReviewIcon from '@mui/icons-material/RateReview';
import { analyzeSentiment } from '../lib/api';

function ReviewInput({

  currentReview,

  setCurrentReview,

  isLoading,

  setIsLoading,

  setHasError,

  setErrorMessage,

  setAnalysisResult,

  addToPreviousAnalyses

}) {
  const handleReviewChange = (e) => {
    setCurrentReview(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!currentReview) {
      setHasError(true);
      setErrorMessage('Please enter a review to analyze.');
      return;
    }

    setIsLoading(true);
    setHasError(false);
    setErrorMessage('');

    try {
      const result = await analyzeSentiment(currentReview);
      setAnalysisResult(result);
      addToPreviousAnalyses({ ...result, text: currentReview });
    } catch (error) {
      console.error('Error analyzing sentiment:', error);
      setHasError(true);
      setErrorMessage(
        error.message || 'An error occurred while analyzing the review. Please try again.'
      );
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Box component="form" onSubmit={handleSubmit} noValidate>

      <Typography variant="h2" component="h2" gutterBottom>

        Enter Movie Review

      </Typography>

      

      <TextField

        fullWidth

        variant="outlined"

        multiline

        rows={6}

        placeholder="Type or paste a movie review here..."

        value={currentReview}

        onChange={handleReviewChange}

        sx={{ mb: 2 }}

        disabled={isLoading}

      />

      

      <Button

        variant="contained"

        color="primary"

        startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : <RateReviewIcon />}

        type="submit"

        disabled={isLoading || !currentReview}

        sx={{ 

          px: 4, 

          py: 1.5,

          fontSize: '1rem',

          fontWeight: 'medium'

        }}

      >

        {isLoading ? 'Analyzing...' : 'Analyze Sentiment'}

      </Button>

    </Box>
  );
}

export default ReviewInput;