import clsx from "clsx";
import React from "react";

interface PropsType {
  className?: string;
  title?: string;
  renderTitle?: React.ReactNode;
  back?: boolean; // show back icon on left top
  close?: boolean; // show close icon on right top
  onClose?: () => void;
  onBack?: () => void;
}

const Header = ({
  className = "",
  title = "",
  renderTitle = null,
  close = false,
  back = false,
  onClose,
  onBack,
}: PropsType) => {
  const handleClickClose = () => {
    onClose?.();
  };

  const handleBack = () => {
    onBack?.();
  };

  if (!title && !close && !back && !renderTitle) return null;

  return (
    <div
      className={clsx(
        "uikit-flex uikit-flex-shrink-0 uikit-items-center uikit-min-h-[60px] uikit-px-5 uikit-justify-between",
        className,
      )}
    >
      {back && (
        <BackIcon
          onClick={handleBack}
          className="uikit-cursor-pointer uikit-text-[#12122A] dark:uikit-text-white"
        />
      )}
      {renderTitle ||
        (title && (
          <span
            className={clsx(
              "uikit-flex-1 uikit-text-[20px] uikit-font-switzerBold uikit-text-primary",
              {
                "uikit-text-center": back || (!close && !back),
              },
            )}
          >
            {title}
          </span>
        ))}
      {close && (
        <CloseIcon
          onClick={handleClickClose}
          className="uikit-cursor-pointer uikit-text-[#12122A] dark:uikit-text-white"
        />
      )}
    </div>
  );
};

export default Header;

export function CloseIcon({
  onClick,
  ...restProps
}: React.SVGProps<SVGSVGElement>) {
  return (
    <div
      className="uikit-cursor-pointer uikit-w-[20px] uikit-h-[20px] uikit-flex uikit-items-center uikit-justify-center"
      onClick={onClick as any}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        {...restProps}
      >
        <path
          d="M9.99983 8.82208L14.1247 4.69727L15.3032 5.87577L11.1783 10.0006L15.3032 14.1253L14.1247 15.3038L9.99983 11.1791L5.87505 15.3038L4.69653 14.1253L8.82133 10.0006L4.69653 5.87577L5.87505 4.69727L9.99983 8.82208Z"
          fill="currentColor"
        />
      </svg>
    </div>
  );
}

export function BackIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      {...props}
    >
      <path
        d="M10.8284 11.9993L15.7782 7.0496L14.364 5.6354L8 11.9993L14.364 18.3633L15.7782 16.9491L10.8284 11.9993Z"
        fill="currentColor"
      />
    </svg>
  );
}