"use client";

import { cn } from "@/lib/utils";
import { ChevronLeft } from "lucide-react";
import { Progress } from "@/components/ui/progress";
import { Button } from "@/components/ui/button";

interface HeaderProps extends React.ComponentProps<"header"> {
  progressProps?: React.ComponentProps<typeof Progress>;
  onBack?: () => void;
  showBackButton?: boolean;
}

function Header({
  className,
  progressProps,
  onBack,
  showBackButton = true,
  ...props
}: HeaderProps) {
  const shouldRenderBackButton = showBackButton && typeof onBack === "function";

  return (
    <header className={cn("w-full p-6 pb-3 min-h-[96px]", className)} {...props}>
      <div className="w-full flex justify-start items-center min-h-9">
        {shouldRenderBackButton && (
          <Button
            type="button"
            variant="ghost"
            className="hover:bg-transparent rounded-full !p-0 -ml-[13px] -mb-[9px]"
            onClick={onBack}
            aria-label="Назад"
          >
            <ChevronLeft size={36} />
          </Button>
        )}
      </div>

      {progressProps && (
        <div className="w-full flex justify-center items-center mt-3">
          <Progress {...progressProps} />
        </div>
      )}
    </header>
  );
}

export { Header };