import Link from "next/link";

import PFRDefaultLogo from "@/components/common/sprites/pfr-default-logo-sprite";
import Breadcrumbs from "@/components/common/breadcrumbs";
import ProgressBar from "@/components/common/progress-bar";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";

type StepHeadingProps = {
  title: string;
  subtitle: string;
  currentStep: number;
  totalSteps?: number;
};

function StepHeading({
  title,
  subtitle,
  currentStep,
  totalSteps = 5,
}: StepHeadingProps) {
  const totalCompletion = Math.floor((currentStep / totalSteps) * 100);
  const visualIndicator =
    "bg-gradient-to-r dark:from-paleBlue dark:to-participant-cerulean from-peach to-participant-bittersweet";

  return (
    <div>
      <div className="flex items-center justify-center mt-0 xl:justify-end xl:me-16 ">
        <Link href={INTERNAL_PAGES.participant.homepage}>
          <PFRDefaultLogo fill="text-black" width={100} />
        </Link>
      </div>
      <div className="mx-6 xl:mx-16 mb-8">
        <ProgressBar
          aria-label={`${totalCompletion}% of your sign up journey is complete`}
          classNames={{
            label: "text-sm font-bold text-black tracking-tight font-inter",
            indicator: visualIndicator,
          }}
          label={`Your sign up journey (${currentStep}/${totalSteps})`}
          maxValue={100}
          minValue={1}
          value={totalCompletion}
        />
      </div>
      <div className="xl:ms-16 ms-6 font-inter text-black">
        <Breadcrumbs />
        <h1 className="text-2xl font-black">{title}</h1>
        <h2 className="text-sm font-noto">{subtitle}</h2>
      </div>
    </div>
  );
}

export default StepHeading;