import React from "react";
import { Link } from "react-router-dom";
import RecomendedSliders from "./RecomendedSliders";

export default function CommonHead({ className, commonHeadData }) {
  return (
    <div
      className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-2 p-2 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
        className || ""
      }`}
    >
      {commonHeadData?.length > 0 && (
        <RecomendedSliders bannerData={commonHeadData} />
      )}
      {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
      {/*    /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
      {/*    /!*    This is common head which will appear as needed , will take many shape*!/*/}
      {/*    /!*</h1>*!/*/}
      {/*    /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
      {/*    /!*    some space for extra texts here*!/*/}
      {/*    /!*</p>*!/*/}
      {/*   */}
      {/*</div>*/}
      {/*<div className="flex-1 flex lg:justify-end">*/}
      {/*    <div className="flex items-center space-x-5">*/}
      {/*        <Link*/}
      {/*            to="/mytask"*/}
      {/*            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
      {/*        >*/}
      {/*           View Task*/}
      {/*        </Link>*/}

      {/*    </div>*/}
      {/*</div>*/}
    </div>
  );
}
