import React from 'react';
import {
  Box,
  Typography,
  Button,
  Paper,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material';
import StarsIcon from '@mui/icons-material/Stars';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';

interface ProfessionalUpgradeProps {
  userType: 'vendor' | 'attorney' | 'real_estate_agent';
  onUpgradeClick: () => void;
}

const ProfessionalUpgrade: React.FC<ProfessionalUpgradeProps> = ({ userType, onUpgradeClick }) => {
  const titleMap = {
    vendor: 'Vendors',
    attorney: 'Attorneys',
    real_estate_agent: 'Real Estate Agents',
  };
  const title = titleMap[userType] || 'Professionals';

  return (
    <Paper sx={{ p: 4, mt: 4, textAlign: 'center' }}>
      <Typography variant="h5" component="h2" gutterBottom color="primary">
        Elevate Your Business as a Premium {title}
      </Typography>
      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
        Upgrade to a Premium account to gain a competitive edge and grow your client base.
      </Typography>
      <List sx={{ textAlign: 'left', maxWidth: 600, mx: 'auto' }}>
        <ListItem>
          <ListItemIcon>
            <StarsIcon color="secondary" />
          </ListItemIcon>
          <ListItemText
            primary="Prioritized in Search Results"
            secondary="Appear higher in search rankings, increasing your visibility to potential clients."
          />
        </ListItem>
        <ListItem>
          <ListItemIcon>
            <SupportAgentIcon color="secondary" />
          </ListItemIcon>
          <ListItemText
            primary="Priority Customer Support"
            secondary="Get faster assistance with any queries or issues, ensuring your operations run smoothly."
          />
        </ListItem>
        {/* Add more professional-specific benefits if needed */}
      </List>
      <Button
        variant="contained"
        color="primary"
        size="large"
        sx={{ mt: 4 }}
        onClick={onUpgradeClick}
      >
        Upgrade to Premium
      </Button>
    </Paper>
  );
};

export default ProfessionalUpgrade;
