import { observer } from "mobx-react-lite";

// icons
import { Expand, Shrink, X } from "lucide-react";

type Props = {
  fullScreen: boolean;
  handleClose: () => void;
  setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
  title: string;
};

export const ProjectAnalyticsModalHeader: React.FC<Props> = observer((props) => {
  const { fullScreen, handleClose, setFullScreen, title } = props;

  return (
    <div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
      <h3 className="break-words">Analytics for {title}</h3>
      <div className="flex items-center gap-2">
        <button
          type="button"
          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
          onClick={() => setFullScreen((prevData) => !prevData)}
        >
          {fullScreen ? <Shrink size={14} strokeWidth={2} /> : <Expand size={14} strokeWidth={2} />}
        </button>
        <button
          type="button"
          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
          onClick={handleClose}
        >
          <X size={14} strokeWidth={2} />
        </button>
      </div>
    </div>
  );
});