import React from 'react';
import { Box, Typography, Avatar } from '@mui/material';
import { Star as StarIcon } from '@mui/icons-material';

interface HeaderProfileProps {
  firstName: string;
  lastName?: string;
  avatar?: string;
  starsBalance: number;
}

export const HeaderProfile: React.FC<HeaderProfileProps> = ({
  firstName,
  lastName,
  avatar,
  starsBalance,
}) => {
  return (
    <Box
      sx={{
        mb: 3,
        p: 3,
        background: 'linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%)',
        borderRadius: 2,
        border: '1px solid rgba(255, 215, 0, 0.2)',
        backdropFilter: 'blur(10px)',
        position: 'relative',
        overflow: 'hidden',
        '&::before': {
          content: '""',
          position: 'absolute',
          top: '-50%',
          right: '-50%',
          width: '200%',
          height: '200%',
          background: 'radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%)',
          animation: 'pulse 4s ease-in-out infinite',
        },
        '@keyframes pulse': {
          '0%, 100%': {
            transform: 'scale(0.8)',
            opacity: 0.5,
          },
          '50%': {
            transform: 'scale(1.2)',
            opacity: 0.3,
          },
        },
      }}
    >
      {/* Profile info */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, position: 'relative', zIndex: 1 }}>
        <Avatar
          src={avatar}
          alt={`${firstName} ${lastName || ''}`}
          sx={{
            width: 64,
            height: 64,
            border: '3px solid #FFD700',
            boxShadow: '0 4px 15px rgba(255, 215, 0, 0.3)',
            '&:hover': {
              transform: 'scale(1.05)',
              transition: 'transform 0.3s ease',
            },
          }}
        />

        <Box sx={{ flexGrow: 1 }}>
          <Typography
            variant="h4"
            sx={{
              color: '#FFFFFF',
              fontWeight: 700,
              mb: 0.5,
              fontSize: 24,
              lineHeight: 1.2,
            }}
          >
            Привет, {firstName}! 👋
          </Typography>

          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 1,
              background: 'rgba(255, 215, 0, 0.15)',
              padding: '8px 16px',
              borderRadius: '50px',
              border: '1px solid rgba(255, 215, 0, 0.3)',
              mt: 1,
              width: 'fit-content',
            }}
          >
            <StarIcon
              sx={{
                color: '#FFD700',
                fontSize: 24,
                animation: 'starPulse 2s ease-in-out infinite',
              }}
            />
            <Typography
              variant="h6"
              sx={{
                color: '#FFD700',
                fontWeight: 700,
                fontSize: 20,
              }}
            >
              {starsBalance.toLocaleString()}
            </Typography>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};