import React from 'react';
import { 
  Box, 
  Typography, 
  Paper, 
  List, 
  ListItem, 
  ListItemText, 
  ListItemSecondaryAction, 
  Chip, 
  IconButton,
  useTheme,
  useMediaQuery 
} from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';
const SalesByLocation = ({ data }) => {
  const theme = useTheme();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <Paper sx={{ 
      p: { xs: 1, sm: 2 },
      borderRadius: '12px',
      boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.1)',
      height: '95%', 
      display: 'flex',
      flexDirection: 'column' 
    }}>
      <Box sx={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center', 
        mb: { xs: 0.5, sm: 1 }
      }}>
        <Box>
          <Typography sx={{ 
            color: '#1A1C21', 
            fontWeight: 500, 
            fontSize: { xs: '16px', sm: '18px' },
            lineHeight: 1.2
          }}>
            Sales by Location
          </Typography>
          <Typography sx={{ 
            color: '#667085', 
            fontWeight: 500, 
            fontSize: { xs: '12px', sm: '14px' },
            lineHeight: 1.2
          }}>
            Sales performance by location
          </Typography>
        </Box>
        <IconButton size={isSmallScreen ? 'small' : 'medium'}>
          <MoreVertIcon fontSize={isSmallScreen ? 'small' : 'medium'} />
        </IconButton>
      </Box>
      
      <List dense sx={{ 
        flexGrow: 1, 
        overflowY: 'auto',
        '&::-webkit-scrollbar': {
          display: 'none'
        }
      }}>
        {data.map((item, i) => (
          <ListItem key={i} disableGutters sx={{ py: { xs: 0.5, sm: 1 } }}>
            <ListItemText
              primary={
                <Typography 
                  sx={{ 
                    fontSize: { xs: '13px', sm: '14px' },
                    fontWeight: 400
                  }}
                >
                  {item.country}
                </Typography>
              }
              secondary={
                <Typography 
                  sx={{ 
                    fontSize: { xs: '11px', sm: '12px' },
                    color: theme.palette.text.secondary
                  }}
                >
                  {item.sales} Sales
                </Typography>
              }
              sx={{ my: 0 }}
            />
            <ListItemSecondaryAction sx={{ 
              display: 'flex', 
              alignItems: 'center', 
              gap: { xs: 0.5, sm: 1 }
            }}>
              <Typography 
                variant="body2" 
                sx={{ 
                  fontSize: { xs: '12px', sm: '14px' },
                  fontWeight: isSmallScreen ? 500 : 400
                }}
              >
                ${item.amount.toLocaleString()}
              </Typography>
              <Chip
                label={`${item.change > 0 ? '+' : ''}${item.change}%`}
                color={item.change > 0 ? 'success' : item.change < 0 ? 'error' : 'default'}
                size={isSmallScreen ? 'small' : 'medium'}
                sx={{
                  fontSize: { xs: '11px', sm: '12px' },
                  height: { xs: '24px', sm: '28px' },
                  '& .MuiChip-label': {
                    px: { xs: 0.5, sm: 1 }
                  }
                }}
              />
            </ListItemSecondaryAction>
          </ListItem>
        ))}
      </List>
    </Paper>
  );
};

export default SalesByLocation;