import React from 'react';
import { Card, CardContent, Typography, Button, Box, CardMedia } from '@mui/material';

import { useNavigate } from 'react-router-dom';
import { PropertiesAPI } from 'types';

interface PropertyListItemProps {
  property: PropertiesAPI;
  onViewDetails: (propertyId: number) => void; // For navigation in search page
  isPublic: boolean;
}

const PropertyListItem: React.FC<PropertyListItemProps> = ({
  property,
  onViewDetails,
  isPublic = false,
}) => {
  const navigate = useNavigate();

  const handleViewDetailsClick = () => {
    // Navigate to the full detail page for this property
    if (!isPublic) {
      navigate(`/property/${property.id}/?search=1`);
    } else {
      navigate(`/public/${property.id}`);
    }
  };
  const value_price = property.listed_price ? property.listed_price : property.market_value;
  const value_text = property.listed_price ? 'Listed Price' : 'Market Value';

  return (
    <Card
      sx={{ display: 'flex', mb: 2, '&:hover': { boxShadow: 6 }, cursor: 'pointer' }}
      onClick={handleViewDetailsClick}
    >
      {property.pictures && property.pictures.length > 0 && (
        <CardMedia
          component="img"
          sx={{ width: 150, height: 150, flexShrink: 0, objectFit: 'cover' }}
          image={property.pictures[0]}
          alt={property.address}
        />
      )}
      <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
        <CardContent sx={{ flex: '1 0 auto' }}>
          <Typography component="div" variant="h6">
            {property.address}
          </Typography>
          <Typography variant="subtitle1" color="text.secondary">
            {property.city}, {property.state} {property.zip_code}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {property.num_bedrooms} Beds | {property.num_bathrooms} Baths | {property.sq_ft} Sq Ft
          </Typography>
          <Typography variant="body1" sx={{ mt: 1 }}>
            {value_text}: <strong>${value_price}</strong>
          </Typography>
        </CardContent>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            pl: 1,
            pb: 1,
            pr: 2,
            justifyContent: 'flex-end',
          }}
        >
          <Button size="small" onClick={handleViewDetailsClick}>
            View Details
          </Button>
        </Box>
      </Box>
    </Card>
  );
};

export default PropertyListItem;
