import { NavLink} from 'react-router-dom';
import Button from '@mui/material/Button';
import ZoomInIcon from '@mui/icons-material/ZoomIn';  // Zoom icon from Material-UI
// Define the PropertyData type
export type OffplanData = {
    
    id: string;
    image: string;
    AtttributePropertyDetails: string;
    adTitle: string;
    DetailUrl: string; 
    CommunityTitle: string;
    bgImage: string;
    developer_name: string;
    p_o_r: string;
    PriceTitleDetail: string;
};

interface OffplanCardProps {
    property: OffplanData;
}

const OffplanCard: React.FC<OffplanCardProps> = ({ property }) => {
    const {
            id,
            image,
            AtttributePropertyDetails,
            adTitle,
            DetailUrl, 
            CommunityTitle,
            bgImage,
            developer_name,
            p_o_r,
            PriceTitleDetail,
    } = property;
    const baseUrl = window.location.origin; 
     
    return (
        <div  className="col-lg-4 main-li" 
            key= {`${id}-index`}
 
         >
            <article className="d-flex flex-column">
                <div
                    className="post-img lozad"
                    style={{ backgroundImage: `url('${image}')` }}
                >
                    <span
                        className="dev_logo d-logo-s"
                        title={developer_name}
                    >
                        <img src={bgImage} alt={developer_name} />
                    </span>
                    <ul className="attrribute-ul hide d-none">
                        <li>{AtttributePropertyDetails}</li>
                    </ul>
                    <NavLink to={`${baseUrl}${DetailUrl}`} className="view-link-offplan"  >
                        <Button
                            variant="contained"
                            color="primary"
                            startIcon={<ZoomInIcon />}
                              
                        >
                            View
                        </Button>
                    </NavLink>
              
                </div>

                <div className="contentcls">
                    <div className="row">
                        <div className="col-sm-12">
                            
                            <div className="row mt5 mb5 spl-margin-list ">
                                <div className="col-sm-12 locpointer-detail flex-1">
                                    <img src="/img/placeholder.png" alt="" className="locpointer" />
                                    {CommunityTitle}
                                </div>
                                
                            </div>
                            <h2 className="title sp-pr-ce-detail">
                                <NavLink to={`${baseUrl}${DetailUrl}`}  >{adTitle}</NavLink>
                                <div className="price-text at-latest  flex-1">
                                    {p_o_r !== '1' && (
                                        <span className="startingfrom">Starting From</span>
                                    )}
                                    <div className="white-space-nowrap" dangerouslySetInnerHTML={{ __html: PriceTitleDetail }} />
                                </div>
                            </h2>
                        </div>

                       
                    </div>

                    <div className="row">
                       
                        <div className="col-sm-4" style={{ display: 'none', alignItems: 'center', justifyContent: 'center' }}>
                            <div className="read-more w-100 align-center" style={{ justifyContent: 'flex-end', display: 'flex' }}>
                                <NavLink to={`${baseUrl}${DetailUrl}`}  >View Details</NavLink> 
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    );
};

export default OffplanCard;


