import React from 'react';
import { Typography, Card, CardContent } from '@mui/material';

interface QuestionCardProps {
  question: string;
  questionNumber: number;
  totalQuestions: number;
}

export const QuestionCard: React.FC<QuestionCardProps> = ({
  question,
  questionNumber,
  totalQuestions,
}) => {
  return (
    <Card
      sx={{
        mb: 4,
        background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%)',
        borderRadius: 2,
        border: '1px solid rgba(255, 255, 255, 0.1)',
        position: 'relative',
        overflow: 'hidden',
        pointerEvents: 'none',
        '&::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '3px',
          background: 'linear-gradient(90deg, #FFD700, #FFC700, #FFD700)',
          animation: 'shine 3s ease-in-out infinite',
        },
        '&::after': {
          content: `"${questionNumber} / ${totalQuestions}"`,
          position: 'absolute',
          top: 12,
          right: 12,
          fontSize: 12,
          fontWeight: 600,
          color: '#FFD700',
          backgroundColor: 'rgba(255, 215, 0, 0.1)',
          padding: '4px 8px',
          borderRadius: '50px',
          border: '1px solid rgba(255, 215, 0, 0.3)',
        },
      }}
    >
      <CardContent
        sx={{
          p: 4,
          position: 'relative',
          zIndex: 1,
          pointerEvents: 'none',
        }}
      >
        <Typography
          variant="h5"
          sx={{
            color: '#FFFFFF',
            fontWeight: 600,
            lineHeight: 1.4,
            textAlign: 'center',
            fontSize: { xs: 18, sm: 20, md: 22 },
            animation: 'fadeIn 0.5s ease-out',
          }}
        >
          {question}
        </Typography>
      </CardContent>
    </Card>
  );
};