import React from 'react'
import { Col, Row } from 'react-bootstrap'
import AboutInfo from './AboutInfo'
import Details from './Details'

const StoneFinishCabinet = ({ StoneFinishCabinet }) => {
  return (
    <>
      <AboutInfo productData={StoneFinishCabinet?.aboutInfo} />
      {(StoneFinishCabinet?.detailsItem?.length > 0 || StoneFinishCabinet?.bottomInfo?.title || StoneFinishCabinet?.bottomInfo?.description) && (
        <Details
          DetailsItem={StoneFinishCabinet.detailsItem}
          bottomInfo={StoneFinishCabinet.bottomInfo}
        />
      )}
      {(StoneFinishCabinet?.aboutInfoTwo || StoneFinishCabinet?.detailsItemTwo?.length > 0) && (
        <>
          <AboutInfo productData={StoneFinishCabinet?.aboutInfoTwo} />
          {(StoneFinishCabinet?.detailsItemTwo?.length > 0 || StoneFinishCabinet?.bottomInfoTwo?.title || StoneFinishCabinet?.bottomInfoTwo?.description) && (
            <Details
              DetailsItem={StoneFinishCabinet.detailsItemTwo}
              bottomInfo={StoneFinishCabinet.bottomInfoTwo}
            />
          )}
        </>
      )}
        {(StoneFinishCabinet?.bottomInfo?.title || StoneFinishCabinet?.bottomInfo?.description) && (
      <section className="about-section about-info-section pt-0 mt-0">
        <div className="container">
          <Row className="justify-content-center text-center">
            <Col md={12}>
                 <div className='mb-2 text-transform-uppercase'><strong>{StoneFinishCabinet?.bottomInfo?.title}</strong></div> 
                 <div dangerouslySetInnerHTML={{ __html: StoneFinishCabinet?.bottomInfo?.description }} />
            </Col>
          </Row>
        </div>
      </section>
      )}
    </>
  )
}

export default StoneFinishCabinet