import React from "react";
import Image from "next/image";
import { Breadcrumb, Typography } from "antd";
import Link from "next/link";

interface ClassifiedsType {
  classifiedsImage: any;
  sectionTitle: string;
  classifiedsHeadIcon: any;
}

function SectionHeader({
  classifiedsImage,
  sectionTitle,
  classifiedsHeadIcon,
}: ClassifiedsType) {
  return (
    <div
      style={{
        background: "#333",
        position: "relative",
        marginTop: "54px",
        height: "240px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div className="w-full h-full absolute">
        <Image
          src={classifiedsImage}
          alt="classified header"
          layout="fill"
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            zIndex: 1,
          }}
        />
      </div>
      <div className="container mx-auto lg:px-[100px] page-header-row flex items-center justify-between">
        <div>
          <Breadcrumb>
            <Breadcrumb.Item className="mt-4">
              <Link style={{ color: "#fff" }} href="/">
                <a href="" className="text-white">
                  Home /
                </a>
              </Link>
            </Breadcrumb.Item>
          </Breadcrumb>
          <Typography.Title
            className="mt-10"
            level={1}
            style={{ fontSize: "16px", color: "#fff" }}
          >
            {sectionTitle}
          </Typography.Title>
        </div>
        <div className="page-header-sha">
          {/* <SHA showLoadingIndicator={false} imageHeight='120px' hideLabel imageOnly specification={{ page: 'classifieds', id: 'classifieds-1', code: 'classifieds-top-page' }} /> */}
        </div>
        <div className="hidden md:block h-[210px] w-[210px]">
          <Image
            src={classifiedsHeadIcon}
            alt="classified icon header"
            className="page-header-img mb-2"
            height={210}
            width={210}
            style={{ height: "210px", margin: "0 0 0 auto" }}
          />
        </div>
      </div>
    </div>
  );
}

export default SectionHeader;