import React from 'react';
import { Card, CardContent, Typography, Box, Link } from '@mui/material';
import DirectionsWalkIcon from '@mui/icons-material/DirectionsWalk';
import DirectionsBikeIcon from '@mui/icons-material/DirectionsBike';
import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
import { WalkScoreAPI } from '../types/api';

interface WalkScoreCardProps {
  walkScore: WalkScoreAPI | null;
}

const WalkScoreCard: React.FC<WalkScoreCardProps> = ({ walkScore }) => {
  if (walkScore) {
    return (
      <Card>
        <CardContent>
          <Box display="flex" justifyContent="space-between" alignItems="center">
            <Typography variant="h6" gutterBottom>
              Walk Score
            </Typography>
            <img src={walkScore.logo_url} alt="Walk Score Logo" style={{ height: 24 }} />
          </Box>
          <Box
            display="flex"
            justifyContent="space-around"
            alignItems="center"
            textAlign="center"
            mt={2}
          >
            <Box>
              <DirectionsWalkIcon color="primary" sx={{ fontSize: 40 }} />
              <Typography variant="h5" sx={{ mt: 1 }}>
                {walkScore.walk_score}
              </Typography>
              <Typography variant="caption">{walkScore.walk_description}</Typography>
            </Box>
            <Box>
              <DirectionsBikeIcon color="primary" sx={{ fontSize: 40 }} />
              <Typography variant="h5" sx={{ mt: 1 }}>
                {walkScore.bike_score}
              </Typography>
              <Typography variant="caption">{walkScore.bike_description}</Typography>
            </Box>
            <Box>
              <DirectionsBusIcon color="primary" sx={{ fontSize: 40 }} />
              <Typography variant="h5" sx={{ mt: 1 }}>
                {walkScore.transit_score}
              </Typography>
              <Typography variant="caption">{walkScore.transit_description}</Typography>
            </Box>
          </Box>
          <Link
            href={walkScore.ws_link}
            target="_blank"
            rel="noopener"
            sx={{ mt: 2, display: 'block' }}
          >
            View on Walk Score
          </Link>
        </CardContent>
      </Card>
    );
  } else {
    return (
      <Card>
        <CardContent>
          <p>Data not available at the moment</p>
        </CardContent>
      </Card>
    );
  }
};

export default WalkScoreCard;
