import React from 'react';
import {
  Card,
  CardContent,
  Typography,
  List,
  ListItem,
  ListItemText,
  Divider,
  Box,
  Chip,
} from '@mui/material';
import SchoolIcon from '@mui/icons-material/School';
import StarRateIcon from '@mui/icons-material/StarRate';
import { SchoolAPI } from 'types';

interface SchoolCardProps {
  schools: SchoolAPI[];
}

const SchoolCard: React.FC<SchoolCardProps> = ({ schools }) => {
  return (
    <Card>
      <CardContent>
        <Box display="flex" alignItems="center" mb={1}>
          <SchoolIcon color="primary" sx={{ mr: 1 }} />
          <Typography variant="h6">Nearby Schools</Typography>
        </Box>
        {schools.length > 0 ? (
          <List dense>
            {schools.map((school, index) => (
              <React.Fragment key={index}>
                <ListItem disableGutters>
                  <ListItemText
                    primary={
                      <Box display="flex" alignItems="center">
                        <Typography variant="body1" sx={{ fontWeight: 'bold', mr: 1 }}>
                          {school.name}
                        </Typography>
                        <Chip
                          label={school.school_type.toUpperCase()}
                          size="small"
                          color={school.school_type === 'public' ? 'info' : 'default'}
                        />
                      </Box>
                    }
                    secondary={
                      <Box>
                        <Typography component="span" variant="body2" color="text.primary">
                          {school.address}, {school.city}
                        </Typography>
                        <Box display="flex" alignItems="center">
                          <StarRateIcon fontSize="small" sx={{ color: 'gold' }} />
                          <Typography
                            component="span"
                            variant="body2"
                            color="text.secondary"
                            sx={{ ml: 0.5 }}
                          >
                            Overall Rating: {school.rating} / 10
                          </Typography>
                        </Box>
                        <Typography variant="caption" display="block" color="text.secondary">
                          Grades: {school.grades} | Enrollment: {school.enrollment}
                        </Typography>
                      </Box>
                    }
                  />
                </ListItem>
                {index < schools.length - 1 && <Divider component="li" />}
              </React.Fragment>
            ))}
          </List>
        ) : (
          <Typography variant="body2" color="text.secondary">
            No school information available.
          </Typography>
        )}
      </CardContent>
    </Card>
  );
};

export default SchoolCard;
