text: import React, { useState } from "react";
  import { Wrap, P, Span } from "../../../StyledComponents/index";
  import { tableDataFormat } from "../../../Utilities/StaticFunctions";
  import Modal from '../../Modal'
  import DropDownButton from "../TilesComponents/LeadsTile/dropDownButton";
  import './style.scss'
  
  const LeadDetailsModal = (props) => {
      const { data, toggle, active, changeStatus } = props
      const [dropdown, setDropdown] = useState(false)
      const { status, id, rejectReason, project } = data
      const { name, totalAreaInSqft } = project
      const dropDownToggle = () => { setDropdown(!dropdown) }
  
      return (
          <Modal active={active} toggle={toggle} heading={'Lead Details'} customClass='leadDetails'>
              <Span type='header' className='editButton'>
                  <DropDownButton toggle={dropDownToggle} active={dropdown} data={data} changeStatus={changeStatus} />
              </Span>
              <Wrap className='main__wrap' type={'body'}>
                  <Wrap className='side__img__main'>
                      <Wrap className='wrap__Details'>
                          <P><Span className='headings'>Lead Id</Span> {tableDataFormat(id)}</P>
                          <P><Span className='headings'>Project Name</Span> {tableDataFormat(name)}</P>
                          <P><Span className='headings'>Project Id</Span> {tableDataFormat(project.id)}</P>
                          <P><Span className='headings'>Status</Span> {tableDataFormat(status)}</P>
                          <P><Span className='headings'>Rejected Reason </Span> {tableDataFormat(rejectReason)}</P>
                          <P><Span className='headings'>Description</Span> {tableDataFormat(totalAreaInSqft)}</P>
                      </Wrap>
                  </Wrap>
              </Wrap>
          </Modal>
      )
  }
  
  export default LeadDetailsModal;