'use client';

import { Col, Container, Row } from "react-bootstrap";
import {
    StyledInnerBannerLong,
    StyledSecondSection
} from "@/components/palmal/inner-banner-log/inner-banner.style";

import BodyText from "@/components/ui/BodyText";
import { ImgParallax } from "@/components/ui/img-parallax";
import LinkOnly from "@/components/ui/link-only";
import React from 'react';
import ThemeLayout from "@/components/ui/themeLayout";
import TitleUp from "@/components/ui/title-up";
import Title from "@/components/ui/title";
import parse from 'html-react-parser';
import settingsDataMain from '@/public/json/settings.json';
import { usePathname } from 'next/navigation';

const InnerBannerLong = ({ data, product }) => {

	const bannerImge = data?.images?.find((f) => f?.banner === 'on');
	const pathname = usePathname()
    const settingsData = settingsDataMain?.data;
    const thumbList = data?.images?.filter((f) => f?.thumb === 'on');

	return (
		<>
            <StyledInnerBannerLong className={`InnerBanner `} data-scroll-section>
              <ImgParallax parallax banner={true} src={data?.images ? bannerImge?.full_path : ''} />
              <Container>
                  <Row>
                        <Col md={9} className="inner-banner-long__contact">
                            <Title animate={true} color={'white'} text={parse(product?.product_data?.title)} tag={'h1'} margin={'0 0 60px'}/>
                        </Col>
                      <Col md={{span: 5, offset: 6}}>
                          <BodyText as={'p'} color={'white'} margin={'0 0 60px'}>
                              {data?.data?.short_title}
                          </BodyText>
                          <BodyText as={'p'} color={'white'} margin={'0 0 60px'}>
                              {data?.data?.short_desc}
                          </BodyText>
                          <BodyText as={'p'} color={'white'} margin={'0 0 0'}>
                              {data?.data?.short_desc_2}
                          </BodyText>
                      </Col>
                  </Row>
              </Container>
            </StyledInnerBannerLong>
            <StyledSecondSection>
                <Container>
                    <Row>
                        <Col md={6} className={'second-section__content_image'}>
                            <div className="image-wrapper-one">
                                <ImgParallax parallax src={thumbList && thumbList[0] ? thumbList[0]?.full_path : ''} />
                            </div>
                        </Col>
                        <Col md={5} className={'second-section__content_image_second'}>
                            <div className="image-wrapper-one">
                                <ImgParallax parallax src={thumbList && thumbList[1] ? thumbList[1]?.full_path : ''} />
                            </div>
                            <div className="image-wrapper-two">
                                <ImgParallax parallax src={thumbList && thumbList[2] ? thumbList[2]?.full_path : ''} />
                            </div>
                        </Col>
                        <Col md={8}>
                            <TitleUp
                                text={parse(data?.data?.short_title)}
                                color={'#402D17'}
                                tag={'h3'}
                                animate={true}
                                margin={'60px 0 50px'}
                            />
                            <BodyText as={'p'} color={'#483409'} margin={'0 0 0'}>
                                {data?.data?.description}
                            </BodyText>
                        </Col>
                    </Row>
                </Container>

            </StyledSecondSection>

        </>
	);
};


export default React.memo(InnerBannerLong);