src/components/Search/SearchForm.jsx

import React, { useState } from 'react';
import { 
  Box, 
  TextField, 
  Button, 
  Typography, 
  Paper, 
  CircularProgress
} from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import styled from '@emotion/styled';

const StyledPaper = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(3),
  marginBottom: theme.spacing(3),
}));

const SearchForm = ({ onSearch, isLoading }) => {
  const [query, setQuery] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (query.trim()) {
      onSearch(query, 'both'); // Always use both models
    }
  };

  return (
    <StyledPaper elevation={2}>
      <Typography variant="h5" gutterBottom sx={{ fontWeight: 'bold' }}>
        Explore Al-Ghazali's Wisdom
      </Typography>
      <Typography variant="subtitle1" gutterBottom color="textSecondary">
        Search through "The Alchemy of Happiness"
      </Typography>
      
      <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
        <TextField
          fullWidth
          variant="outlined"
          label="What would you like to know?"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          InputProps={{
            endAdornment: (
              <Button 
                type="submit" 
                color="primary" 
                variant="contained" 
                disabled={isLoading}
                sx={{ ml: 1 }}
              >
                {isLoading ? <CircularProgress size={24} /> : <SearchIcon />}
              </Button>
            ),
          }}
        />
      </Box>
    </StyledPaper>
  );
};

export default SearchForm;