'use client';

import { Box, Chip, Typography } from '@mui/material';
import { AutoAwesome } from '@mui/icons-material';
import { motion, AnimatePresence } from 'framer-motion';

interface SuggestedQuestionsProps {
  questions: string[];
  onQuestionClick: (question: string) => void;
  loading?: boolean;
}

export function SuggestedQuestions({
  questions,
  onQuestionClick,
  loading = false,
}: SuggestedQuestionsProps) {
  if (loading || questions.length === 0) {
    return null;
  }

  return (
    <Box
      sx={{
        mt: 2,
        p: 2,
        borderRadius: 2,
        bgcolor: 'rgba(255, 255, 255, 0.7)',
        backdropFilter: 'blur(10px)',
        border: '1px solid',
        borderColor: 'divider',
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
        <AutoAwesome sx={{ fontSize: 18, color: 'primary.main' }} />
        <Typography variant="caption" fontWeight={600} color="text.secondary">
          Suggested follow-up questions
        </Typography>
      </Box>

      <Box
        sx={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 1,
        }}
      >
        <AnimatePresence>
          {questions.map((question, index) => (
            <motion.div
              key={question}
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              transition={{ delay: index * 0.1 }}
            >
              <Chip
                label={question}
                onClick={() => onQuestionClick(question)}
                sx={{
                  py: 2.5,
                  px: 1,
                  borderRadius: 2,
                  fontSize: '0.875rem',
                  bgcolor: 'background.paper',
                  border: 1,
                  borderColor: 'primary.light',
                  cursor: 'pointer',
                  transition: 'all 0.2s',
                  '&:hover': {
                    bgcolor: 'primary.light',
                    borderColor: 'primary.main',
                    transform: 'translateY(-2px)',
                    boxShadow: 2,
                  },
                  '&:active': {
                    transform: 'translateY(0)',
                  },
                }}
              />
            </motion.div>
          ))}
        </AnimatePresence>
      </Box>
    </Box>
  );
}