"use client"
import { useAuthStore } from "@/zustand/auth/useAuthStore";
import { ReactNode } from "react";

type Props = {
  title?: string | ReactNode;
  description?: string | ReactNode;
  iconName?: string | ReactNode;
  tagSpanIcon?: string | ReactNode;
  tagSpanText?: string | ReactNode;
};


const TitleCard = (content: Props) => {

  const { sidebarToggle } = useAuthStore()
  const { updateSidebarToggle } = useAuthStore()

  const handleSidebarToggle = () => {
    updateSidebarToggle(!sidebarToggle)
  }
  return (
    <div className="mb-5 flex flex-col items-start sm:flex-row sm:items-center gap-4">
      <div className="w-full flex items-start gap-3">
        <button type="button" className="w-7 h-7 shrink-0 lg:w-8 lg:h-8 bg-primary rounded-md flex items-center justify-center cursor-pointer mt-1 xl:hidden!" onClick={handleSidebarToggle}>
          <i className="icon icon-hamburger w-5 h-5 bg-white"></i>
        </button>
        <div className="w-full">
          {content?.title && (
            <h2
              className={`text-xl lg:text-2xl 2xl:text-4xl font-bold leading mb-1 xl:mb-2 last:mb-0 ${content?.iconName ? "flex items-start gap-2 lg:gap-2.5" : ""
                }`}
            >
              {content?.iconName && (
                <i
                  className={`icon ${content?.iconName} bg-primary w-6 h-6 lg:w-7.5 lg:h-7.5 2xl:w-9.5 2xl:h-9.5 mt-0.5`}
                ></i>
              )}
              {content?.title}
            </h2>
          )}
          {content?.description && (
            <p className="text-sm md:text-base xl:text-lg 2xl:text-2xl font-medium text-grey92">
              {content?.description}
            </p>
          )}
        </div>
      </div>

      {content?.tagSpanText && content?.tagSpanIcon && (
        <span className="inline-flex gap-2 items-center shrink-0 rounded-full py-1.5 px-3 bg-primary-c1 text-theme-bg lg:text-lg">
          <i
            className={`icon ${content?.tagSpanIcon} bg-theme-bg w-5 h-5 lg:w-5.5 lg:h-5.5`}
          ></i>
          {content?.tagSpanText}
        </span>
      )}
    </div>
  );
};

export default TitleCard;